jquery form validation by class Verify that the form is not empty _jquery

In the development of the system, often have some form data is required, if the use of jquery through ID to verify, not only will affect efficiency, there will be omissions, not easy to later maintenance.

This chapter describes how to use jquery to unify the validation of the form's configuration class. (ID a page can only be used once; class can be referenced multiple times)

1: Add class for input, the name can be set arbitrarily, but each input needs to be consistent, this chapter case CALSS set to Nonull. (If the input already has class attribute, can add directly to thereafter)

2: Add a property to the input for later use in jquery to get the field as a prompt. This chapter of the case indicates that the property is Notnull.

3: Through jquery through the page of all calss to Nonull form, verify that it is empty, if it is empty, by getting the Notnull field, make a null prompt.

For specific settings, refer to the case below. This chapter is for Input,radio,select,checkbox and other types are elaborated.

<! DOCTYPE html>  

Here to introduce jquery.validate.js verification plug-ins

Jquery.validate.js is a validation plug-in for jquery, and with the advantage of jquery, we can quickly validate some of the common inputs and expand our own authentication methods.

For instance, there is a form:

<form id= "Signupform" method= "Get" action= "" > <fieldset> <legend>validating a complete form</ legend> <p> <label for= "FirstName" >Firstname</label> <input id= "FirstName" Name= "FirstName" class= "Required"/> </p> <p> <label for= "LastName" >Lastname</label> <input id= "LastName "Name=" LastName "/> </p> <p> <label for=" username ">Username</label> <input id=" username "Name=" username "/> </p> <p> <label for=" password ">Password</label> <input id=" password "Name=" password "type=" password "/> </p> <p> <label for=" Confirm_password ">confirm password</ label> <input id= "Confirm_password" name= "Confirm_password" type= "password"/> </p> <p> <label for= "Email" >Email</label> <input id= "email" name= "email"/> </p> <p> <input class= " Submit "type=" submit "value=" Submit "/> </p> </fieldset&Gt </form>

In this form, name, surname, username, password, confirmation password and email. They are all non-null, and the e-mail message needs to be in a well-formed address, with the confirmation password and password consistent. The easiest way to use jquery validation is to introduce the jquery.js and jquery validation.js two JS files. Then add class to input, namely:

<input id= "FirstName" name= "FirstName" class= "required"/> <input id= "LastName" Name= "LastName" class= "
Required "/>
<input id=" username "name=" username "class=" required "/>" <input id= "password" name= "
Password "type=" password "class=" required "/> <input id=" Confirm_password "name=" Confirm_password "type="
Password "class=" required "equalto=" #password "/> <input id=" email "name=" email "
class=" required Email " >

The default validation for validate is shown below

Required: "Required fields",
Remote: "Please fix this field",
Email: "Please enter the correct format email",
URL: "Please enter a valid URL",
Date: "Please enter a valid date",
Dateiso: "Please enter a valid date (ISO).",
Number: "Please enter legal numbers",
Digits: "Only integers can be entered",
CreditCard: "Please enter a valid credit card number",
Equalto: "Please enter the same value again",
Accept: "Please enter a string with a legal suffix name",
Maxlength:jQuery.format ("Please enter a string with a maximum length of {0}"),
Minlength:jQuery.format ("Please enter a string with a length of at least {0}"),
Rangelength:jQuery.format ("Please enter a string between {0} and {1}"),
Range:jQuery.format ("Please enter a value between {0} and {1}"),
Max:jQuery.format ("Please enter a value of max {0}"),
Min:jQuery.format ("Please enter a value of min {0}")

Then, in the read event of document, add the following method:

   <script>
    $ (document). Ready (function () {
        $ ("#signupForm"). Validate ();
   </script>

In this way, when the form is submitted, it is validated against the specified class of input. If it fails, the form's submission is blocked. Also, the prompt is displayed after the input.

However, this feels bad because the validation rules invade our HTML code. Another way is to use "rules". We remove those validations from input with class. Then modify the document's Ready Event response code:

$ (document). Ready (function () {
$ ("#signupForm"). Validate ({
rules:{
FirstName: "Required",
LastName: "Required",
Username: "Required",
Password: "Required", confirm_password:{required
: True,
Equalto: "#password"
},
email:{
required:true,
email:true
}
});

In this way, the same effect can be achieved.

The next problem, then, is that the error message displayed is the default. We need to use a custom hint:

$ (document). Ready (function () {
$ ("#signupForm"). Validate ({
rules:{
FirstName: "Required",
LastName: "Required",
Username: "Required",
Password: "Required", confirm_password:{required
: True,
Equalto: "#password"
},
email:{
required:true,
email:true
}
},
messages:{FirstName: "Required Fields",
LastName: "Required",
Username: "Required",
Password: "Required",
confirm_ password:{
Required: "Required",
Equalto: "Inconsistent password"
},
email:{
required: "Required",
email: " Malformed "}}})

If you also want to display a special style (such as a red font) on the error message, you can add:

<style type= "Text/css" >
#signupForm label.error {
padding-left:16px;
margin-left:2px;
color:red;
Background:url (img/unchecked.gif) no-repeat 0px 0px;
}
</style>

Continue to add validation rules for the length of the input password:

$ (document). Ready (function () {
$ ("#signupForm"). Validate ({
rules:{
FirstName: "Required",
LastName: "Required",
Username: "Required",
password:{required:true
,
minlength:4,
maxlength :
},
confirm_password:{
required:true,
equalto: "#password"
},
email:{
Required:true,
email:true
}
},
messages:{
FirstName: "Required",
LastName: "
required", Username: "Required",
password:{
required: "Required",
minlength:jQuery.format ("Password length not less than {0} bit"),
Maxlength:jQuery.format ("Password length not exceeding {0} bit")
},
confirm_password:{
required: "Required",
Equalto: " Password inconsistency "
},
email:{
required:" Required ",
email:" Wrong format "
}})

Using remote

You can specify a trigger-by-event (optional value is KeyUp (each time the key is pressed), blur (when the control loses focus), and is triggered only when the submit button is not specified.

$ (document). Ready (function () {
$ ("#signupForm"). Validate ({
event: "KeyUp" | | "Blur"
})
})

If you specify debug as True, the form will not be submitted for verification only (default is commit) and can be used to debug

$ (document). Ready (function () {
$ ("#signupForm"). Validate ({
debug:true
})
})

If you need to do some custom processing to use the Submithandler parameter before submitting

$ (document). Ready (function () {
$ ("#signupForm"). Validate ({
submithandler:function () {
alert ("Success ");
}
})
})