JQuery verification framework (1) option (jQuery validation)

Html code

<Script type = "text/javascript" src = js/jquery-1.3.2.min.js> </script>
<Script type = "text/javascript" src = js/jquery. validate. pack. js> </script>
<Script type = "text/javascript">
$ (Document). ready (function (){
$ ("# TextForm"). validate ();
});
</Script>
<Form class = "cmxform" id = "commentForm" method = "get" action = "">
Name <input id = "cname" name = "name" size = "25" class = "required" minlength = "2"/>
<Input class = "submit" type = "submit" value = "Submit"/>
</Form>

In this article, we will introduce jQuery Validation with the js snippets above.
Verification starts with this method: validate ([options])
I. options)
[1] debug type: Boolean default: false
Note: Enable the debugging mode. If it is true, the form is not submitted, and some error messages (Firebug or Firebug lite is required) are displayed on the console ). When you want to prevent the form from submitting events by default, try to enable it.
Js Code

$ (". Selector"). validate ({
Debug: true
})

[2] submitHandler type: Callback default: default (native) form submit
Note: When the form passes verification, submit the form. The callback function has a default form parameter.
Js Code

$ (". Selector"). validate ({
SubmitHandler: function (form ){
// Do other stuff for a valid form
Form. submit ();
}
})

[3] invalidHandler type: Callback
Note: When a form that has not passed verification is submitted, You can process some tasks in the callback function. The callback function has two parameters: the first is an event object, and the second is the validator)
Js Code

$ (". Selector"). validate ({
InvalidHandler: function (form, validator ){
Var errors = validator. numberOfInvalids ();
If (errors ){
Var message = errors = 1
? 'You missed 1 field. It has been highlighted'
: 'You missed '+ errors + 'fields. They have been highlighted ';
$ ("Div. error span" response .html (message );
$ ("Div. error"). show ();
} Else {
$ ("Div. error"). hide ();
}
}
})

[4] ignore type: Seletor
Note: When form verification is performed, the form selected by the selector is filtered out. The jQuery not method (not () is used ()). Forms of the submit and reset types are always ignored.
Js Code

$ ("# Myform"). validate ({
Ignore: ". ignore"
})

[5] rules type: Options default: rules are read from markup (classes, attributes, metadata)
Description: User-defined key/value pair rules. A key is the name attribute (or a set of Radio/check buttons) of a form element. The value is a simple string or an object consisting of rule/parameter pairs (rule/parameter. It can be used with class/attribute/metadata rules. Each rule can specify a dependent verification precondition.
Js Code

$ (". Selector"). validate ({
Rules :{
// Simple rule, converted to {required: true}
Name: "required ",
// Compound rule
Email :{
Required: true,
Email: true
}/*
Email :{
Depends: function (element ){
Return $ ("# contactform_email: checked ")
}
}*/
}
})

[6] messages type: Options default: Message used by the Verification Method default
Description: Custom key/value pairs. The key is the name attribute of a form element. The value is the message to be displayed for the form element. The message overwrites the title attribute of the element or the default message. A message can be a string or callback function. The callback function must be called in the scope of the validators. The rule parameter is used as the first parameter of the callback function, and the form element is used as the second parameter of the callback function, A string message must be returned.
Js Code

$ (". Selector"). validate ({
Rules :{
Name: "required ",
Email :{
Required: true,
Email: true
}
},
Messages :{
Name: "Please specify your name ",
Email :{
Required: "We need your email address to contact you ",
Email: "Your email address must be in the format of name@domain.com"
}
}
})

[7] groups type: Options
Description: Specifies an error message group. A group uses any group name as the key, and a list of table element names separated by blank characters as the value. ErrorPlacement is used to define the storage location of Group messages.
Js Code

$ ("# 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 );
},
Debug: true
})

[8] onsubmit type: Boolean default value: true
Note: The verification form is submitted. When it is set to false, only other events can be used for verification.
Js Code

$ (". Selector"). validate ({
Onsubmit: false
})

[9] onfocusout type: Boolean default: true
Note: verification is performed when the focus is removed (except for the single choice or check button ). If no content is entered in the form, all rules will be skipped unless the form has been marked as invalid.
Js Code

$ (". Selector"). validate ({
Onfocusout: false
})

[10] onkeyup type: Boolean default value: true
Note: verification is performed when the keyboard is restarted. As long as the form element is not marked as invalid, no response will be made. In addition, all the rules will be verified each time the button pops up.
Js Code

$ (". Selector"). validate ({
Onkeyup: false
})

[11] onclick type: Boolean default: true
Note: Click the Verify button for single choice and check.
Js Code

$ (". Selector"). validate ({
Onclick: false
})

[12] focusInvalid type: Boolean default: true
Note: When verification is ineffective, focus on the first invalid form element. If the value is false, the verification is invalid and there is no focus response.
Js Code

$ (". Selector"). validate ({
FocusInvalid: false
})

[12] focusCleanup type: Boolean default value: false
NOTE: If it is true, when the form gets the focus, remove the errorClass on the form and hide all error messages. Avoid using it with focusInvalid.
Js Code

$ (". Selector"). validate ({
FocusCleanup: true
})

[13] meta type: String
Note: If you want to use other plug-ins to use metadata verification rules, you must specify the corresponding metadata object.
Js Code

$ ("# Myform"). validate ({
Meta: "validate"
})
<Input type = "text" name = "email" class = "{validate: {required: true, email: true}"/>

[14] errorClass type: String default: "error"
Note: use this set style to define the style of the error message.
Js Code

$ (". Selector"). validate ({
ErrorClass: "invalid"
})

[15] validClass type: String default: "valid"
Description: sets the message display style when the verification is passed.
Js Code

$ (". Selector"). validate ({
ValidClass: "success"
})

[16] errorElement type: String default: "label"
Creates an error message container using the html element type. The default "label" has the advantage of using the for attribute to establish meaningful connections between error messages and invalid forms (a commonly used one, regardless of the form element ).
Js Code

$ (". Selector"). validate ({
ErrorElement: "em"
})

[17] wrapper type: Boolean
Note: an error message is surrounded by a specified element. It is useful to create an error message list with errorLabelContainer.
Js Code

$ (". Selector"). validate ({
Wrapper: "li"
})

[18] errorLabelContainer type: Selector
Description: The container of the error message tag.
Js Code

$ ("# Myform"). validate ({
ErrorLabelContainer: "# messageBox ",
Wrapper: "li"
})

[19] errorContainer type: Selector
Description: The container of the error message.
Js Code

$ ("# Myform"). validate ({
ErrorContainer: "# messageBox1, # messageBox2 ",
ErrorLabelContainer: "# messageBox1 ul ",
Wrapper: "li", debug: true,
SubmitHandler: function () {alert ("Submitted! ")}
})

[20] showErrors type: Callback default: None, built-in Display message
Description: handle for custom message display. The callback function has two parameters: errorMap and errorList, which are called in the context of the validator object. The parameter contains only the form elements verified by onblur/onkeyup, or a single element. In addition, you can use this. defaultShowErrors () to trigger the default behavior.
Js Code

$ (". Selector"). validate ({
ShowErrors: function (errorMap, errorList ){
$ ("# Summary" ).html ("Your form contains"
+ This. numberOfInvalids ()
+ "Errors, see details below .");
This. defaultShowErrors ();
}
})

[21] errorPlacement type: Callback default: Keep in the label behind the invalid form
Note: You can customize the display position of the error label. The first parameter is an error tag used as a jQuery object, and the second parameter is a form element that has not been verified as a jQuery object.
Js Code

$ ("# Myform"). validate ({
ErrorPlacement: function (error, element ){
Error. appendTo (element. parent ("td"). next ("td "));
},
Debug: true
})

[22] success type: String, Callback
Note: If this parameter is specified, a message is displayed when verification passes. If it is of the String type, add the style to the tag. If it is a callback function, the tag is used as its unique parameter.
Js Code

$ ("# Myform"). validate ({
// Success: "valid ",
Success: function (label ){
Label. addClass ("valid"). text ("OK! ")
}
})

[23] highlight type: Callback default: Add errorClass to form Element
Note: highlight unverified form elements.
Js Code

$ (". Selector"). validate ({
Highlight: function (element, errorClass ){
$ (Element). fadeOut (function (){
$ (Element). fadeIn ()
})
}
})

[24] unhighlight type: Callback default: Remove errorClass
Note: opposite to the highlight operation
Js Code

$ (". Selector"). validate ({
Highlight: function (element, errorClass ){
$ (Element). addClass (errorClass );
$ (Element. form). find ("label [for =" + element. id + "]")
. AddClass (errorClass );
},
Unhighlight: function (element, errorClass ){
$ (Element). removeClass (errorClass );
$ (Element. form). find ("label [for =" + element. id + "]")
. RemoveClass (errorClass );
}
});

[25] ignoreTitle type: Boolean default value: false
Note: You can set this parameter to skip the reference to the title attribute of an error message to avoid conflicts on the Google toolbar.
Js Code

$ (". Selector"). validate ({
IgnoreTitle: true
})

Jquery content:

• How does jquery determine whether an object exists?
• How does jquery accept function parameters?
• Append in jquery
• How does jquery change the css class name?