jQuery validation plugin

How to use jQuery validation

HTML View

 <form class="login">
        <p>Email: <input type="email" name="email" required></p>
        <p>Password: <input type="password" name="password" required></p>
        <p><input type="submit" value="Login"></p>
    </form>

Basic init

$('.login').validate();

Custom rules, messages

$('.login').validate({
            rules: {
                email: {
                    required: true,
                    email: true
                },
                password: {
                    required: true,
                    minlength: 6
                }
            },
            messages: {
                email: {
                    required: "You must enter an email address.",
                    email: "You've entered an invalid email address."
                },
                password: {
                    required: "You must enter a password.",
                    minlength: "Your password must be at least {0} characters."
                }
            }
});

When defining rules, there’s quite a few different options available:

• required – Makes the element required.
• remote – Requests a resource to check the element for validity.
• minlength – Makes the element require a given minimum length.
• maxlength – Makes the element require a given maximum length.
• rangelength – Makes the element require a given value range.
• min – Makes the element require a given minimum.
• max – Makes the element require a given maximum.
• range – Makes the element require a given value range.
• email – Makes the element require a valid email
• url – Makes the element require a valid url
• date – Makes the element require a date.
• dateISO – Makes the element require an ISO date.
• number – Makes the element require a decimal number.
• digits – Makes the element require digits only.
• creditcard – Makes the element require a credit card number.
• equalTo – Requires the element to be the same as another one

Submit Handle and show custom error message

 var validator = $('.login').validate({
            rules: {
                email: {
                    required: true,
                    email: true
                },
                password: {
                    required: true,
                    minlength: 6
                }
            },
            messages: {
                email: {
                    required: "You must enter an email address.",
                    email: "You've entered an invalid email address."
                },
                password: {
                    required: "You must enter a password.",
                    minlength: "Your password must be at least {0} characters."
                }
            },
            submitHandler: function(event) {
                console.log("You just submitted the 'login' form.");
                var email = $('[name=email]').val();
                var password = $('[name=password]').val();
				
		    //Show custom error
                validator.showErrors({
			   email: 'This is error'
                   });
                }
        });

Custom Error Placement

$("#myform").validate({
  groups: {
    username: "fname lname"
  },
  errorPlacement: function(error, element) {
    if (element.attr("name") == "fname" || element.attr("name") == "lname" ) {
      error.insertAfter("#lastname");
    } else {
      error.insertAfter(element);
    }
  }
});


errorPlacement: function (error, element) {
    if (element.attr("type") == "checkbox") {
        error.insertAfter($(element).parents('div').prev($('.question')));
    } else {
        // something else if it's not a checkbox
    }
}