Is query validator with dynamic error validation not supported?

I was trying to use jqueryvalidator like the below code. Is there a way to use validation like this in canvas?

$("form[name='registration']").validate({
    // Specify validation rules
    rules: {
      // The key name on the left side is the name attribute
      // of an input field. Validation rules are defined
      // on the right side
      firstname: "required",
      lastname: "required",
      email: {
        required: true,
        // Specify that email should be validated
        // by the built-in "email" rule
        email: true },

      password: {
        required: true,
        minlength: 5 } },

    // Specify validation error messages
    messages: {
      firstname: "Please enter your firstname",
      lastname: "Please enter your lastname",
      password: {
        required: "Please provide a password",
        minlength: "Your password must be at least 5 characters long" },

      email: "Please enter a valid email address" },

    // Make sure the form is submitted to the destination defined
    // in the "action" attribute of the form when valid
    submitHandler: function (form) {
      form.submit();
    } });

Thank you very much,
We need to add this also in custom CSS. Right? or is there some other way for this?

label.error {
	display: block !important;
}

Adding .show-error-msg Class to the .form-widget element is not working.
But modifying the custom CSS works.
.customjs Class was added to the .form-widget element in both cases
I guess I might be missing something