Markup recommendations
Each input has a label associated with it: The for-attribute of the label refers to the id-attribute of the input.
|
1
2
|
<label for="firstname">Firstname</label><input id="firstname" name="fname"> |
The name attribute is '''required''' for input elements, the validation plugin doesn't work without it. Usually name and id attributes should have the same value.
Methods
A validation method implements the logic to validate any element. Provided are a set of default validation methods, such as required. Apart from required itself and equalTo, all validation methods declare an element valid when it has no value at all. That way an email field is optional unless required is specified. You can specify an element input to contain a valid email address, or nothing at all. Use jQuery.validator.addMethod to implement custom methods.
Rules
A validation rule applies one or more validation methods to an input element. You can specify validation rules via metadata or via plugin settings (option rules). The decision is often influenced by serverside infrastructure. If a web framework is used, it is often easier to use metadata, which is also good for fast prototyping. Plugin settings produce cleaner markup, though valid markup results from both.
Error message display
Error messages are handled via label elements with an additional class (option errorClass). The link between the message and the invalid element is provided via the labels for attribute. When provided in the markup, they are shown and hidden accordingly, and otherwise created on demand. By default, labels are created after the invalid element, this is also customizable (option errorPlacement). It is also possible to put them into an error container (option errorLabelContainer). To use a different element then a label, specify the errorElement option.
Example：
$(document).ready(function () {
var password_info = "password should be char (both upper and low), number and symbol from \' ~ ! @ # $ , % ^ & * ( . ) ' _ + | ? < > : \"; `\', length between 8~16";
jQuery.validator.addMethod('regexpassword', function(value, element){
var password_re1 = /[a-z]+/;
var password_re2 = /[A-Z]+/;
var password_re3 = /[0-9]+/;
var password_re4 = /[~!@#$,%^&*(.)'_+|?<>:";`]+/;
function passwdRegexpCheck(passwd){
if(passwd != null && passwd != ""){
var len = passwd.length;
if(len < 8 || len > 15){
return false;
}
}
var rg1 = password_re1.test(passwd);
if (rg1 == true){
var rg2 = password_re2.test(passwd);
if(rg2 == true){
var rg3 = password_re3.test(passwd);
if(rg3 == true){
var rg4 = password_re4.test(passwd);
return rg4;
}
return false;
}
return false;
}
return false;
};
return this.optional(element) || passwdRegexpCheck(value);
}, password_info);
$('#password_reset_form').validate({
messages : {
password: {
required: "please input a valid password",
minlength: "the min length is 8",
maxlength: "the max length is 16"
},
password_confirm: {
required: "please input a valid password again",
equalTo: "the twice inputed passwords should be the same."
}
},
rules : {
password: {
required: true,
regexpassword : true
},
password_confirm: {
required: true,
rangelength: [8, 16],
equalTo: "#password"
}
},
highlight: function (element) {
$(element).removeClass('validate valid');
$(element).addClass('validate invalid');
},
unhighlight: function (element) {
$(element).removeClass('validate invalid');
$(element).addClass('validate valid');
},
errorElement: 'span',
onfocusout: function (element, event) {
this.element(element);
}
});
});
Reference Link: