The form passed class verification for jquery form verification is not empty, jqueryclass

The form passed class verification for jquery form verification is not empty, jqueryclass

When developing a system, some form data is usually required. If jQuery is used to verify the data by ID, it will not only affect the efficiency, but also cause some omissions and is not easy to maintain later.

This chapter describes how to use jQuery to perform unified verification by configuring the class for the form. (ID can be used only once on a page; class can be referenced multiple times)

1: Add a class for input. The name can be set at will, but each input must be consistent. In this chapter, set calss to noNull. (If the input has a class attribute, it can be directly added to it)

2: add an attribute for input to obtain this field through jquery later and use it as a prompt. In this chapter, the case message is "notNull.

3: Use jQuery to traverse all forms whose calss is noNull and verify whether they are empty. If they are empty, a blank prompt is displayed by obtaining the notNull field.

For more information, see the following cases. This chapter describes the input, radio, select, and checkbox types.

<! DOCTYPE html> 
The following describes the jquery. validate. js verification plug-in.
Jquery. validate. js is a validation plug-in under jquery. With the advantages of jquery, we can quickly verify some common input and expand our own verification methods.

For example, 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></form>
In this form, the name, last name, user name, password, Confirm Password, and email. They are all non-empty, and the email must be in the correct format and confirm that the password is consistent with the password. The simplest way to verify with jQuery is to introduce two js files: jquery. js and jquery validation. js. Then add the class in the input:
<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 following lists the default verification items provided by validate.
Required: "required fields ",
Remote: "Please correct this field ",
Email: "Please enter an email in the correct format ",
Url: "enter a valid url ",
Date: "enter a valid date ",
DateISO: "enter a valid date (ISO ).",
Number: "enter a valid number ",
Digits: "Only integers can be entered ",
Creditcard: "enter a valid credit card number ",
Similar to: "Please enter the same value again ",
Accept: "enter a string with a valid suffix ",
Maxlength: jQuery. format ("enter a string with a maximum length of {0 "),
Minlength: jQuery. format ("enter a string with at least {0} length "),
Rangelength: jQuery. format ("enter a string between {0} and {1 "),
Range: jQuery. format ("enter a value between {0} and {1 "),
Max: jQuery. format ("enter a maximum value of {0 "),
Min: jQuery. format ("enter a minimum value of {0 ")
Then, add the following method to the document read event:
   <script>    $(document).ready(function(){        $("#signupForm").validate();    }   </script>
In this way, when the form is submitted, it will be verified according to the class specified by the input. If it fails, the submission of form will be blocked. In addition, the prompt information is displayed after the input.

However, this is not good because the verification rules intrude into our html code. Another way is to use "rules ". We will delete the verification of input with class. Then modify the ready event response code of the document:
$(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 following problem is that the error prompt displayed is the default one. We need to use the custom prompt:
$ (Document ). ready (function () {$ ("# signupForm "). validate ({rules: {firstname: "required", lastname: "required", username: "required", password: "required", confirm_password: {required: true, failed: "# password"}, email: {required: true, email: true }}, messages: {firstname: "required", lastname: "required", username: "required", password: "required", confirm_password: {required: "required", failed to: "inconsistent passwords"}, email: {required: "required", email: "Incorrect format "}}});})
If you want to display a special style (for example, the font is red) on the error message, you can add the following:
<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 verification rules for the length of the entered password:
$ (Document ). ready (function () {$ ("# signupForm "). validate ({rules: {firstname: "required", lastname: "required", username: "required", password: {required: true, minlength: 4, maxlength: 15 }, confirm_password: {required: true, failed to: "# 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} characters"), maxlength: jQuery. format ("the password length cannot exceed {0} characters")}, confirm_password: {required: "required", failed to: "inconsistent passwords"}, email: {required: "required", email: "Incorrect format "}}});})
Use remote

You can use the event to specify the trigger verification method (the optional values include keyup (when each key is pressed) and blur (when the control loses focus). If it is not specified, the trigger is only triggered when the button is pressed)
$(document).ready(function(){$("#signupForm").validate({event:"keyup" || "blur"})})
If debug is set to true, the form is not submitted for verification only (submitted by default) and can be used for debugging.
$(document).ready(function(){$("#signupForm").validate({debug:true})})
If you need to customize the processing before submission, use the submitHandler parameter.
$(document).ready(function(){$("#signupForm").validate({SubmitHandler:function(){alert("success");}})})