Jquery.validate.js "Simple and practical form validation framework"

• Online Demo 1
• Local Downloads

Original link: http://www.gbtags.com/gb/share/5749.htm

Recently in the user login, registration, and User Center ... Then in the MU class network jquery.validate need place, according to their own needs to make the details of the changes, it is important to style it.

The first time to publish these, not good to say don't mind, start. First of all:

1. $("#form"). Validate({
2. //Edit in this area
3. });

Validation often requires debugging, and the framework includes a method, as follows:

1. Debug:True, //debug mode (not committed)

To an instance, HTML:

2. <div Class="Form-group">
4. <label for ="username"> user name:</label>
6. <input type="text" name="username" id="username" placeholder="Please enter user name" />
8. </div>

Set validation with the Rules method, then the requirement is: required, length between 3-10:

2. $(document). Ready(function() {
4. $("#form"). Validate({
6. Debug:True, //debug mode
8. Rules: {
10. Username: {
12. Required:true, //enable required fields
14. Rangelength: [3,] //Please enter a value between 3 and 10 bits
16. };
18. };
20. });
22. });

My understanding is that you get the name value and type types to validate. Let's re-enter the password:

Html:

2. <div Class="Form-group">
4. <label for ="Confirm-password"> Confirm password:</label>
6. <input type="password" name= "Confirm-password" id=" Confirm-password " placeholder=" Please enter your password again " />
8. </div>
12. Js:

1. Password: {
2. Required:true,
3. Rangelength: [6,]
4. },
5. "Confirm-password": {
6. Equalto:"#password" //must have the same password
7. }

If you want to customize the prompt message, then use the messages method:

1. Messages: {
2. Username: {
3. Required:"user name cannot be left blank", //user name must fill in the prompt
4. Rangelength:"Please check if the length of the number you entered is between 2 and 10" //user name length hint
5. }

Let's talk about style, when the input box is wrong, class becomes error, and when the input box is correct, class class becomes valid, so different color border is added:

2. . form-group input. Error{
4. Border-color: #E74C3C;
6. }
8. . form-group input. Valid {
10. Border-color: #55D98D;
12. }

The message of the prompt? When the input box prompts an error, the note pops up, the class name is error, the input box prompt is correct, the note is hidden, and the class name success is added, then:

1. . form-group span. Error{
2. Color: #E74C3C;
3. }
4. . form-group span. Success{
5. Display: none;
6. }

In fact, there are many ways, such as: Groups, errorplacement ... Basically can meet the requirements of form verification, demo there is a demo, see it.

Original link: http://www.gbtags.com/gb/share/5749.htm

Jquery.validate.js "Simple and practical form validation framework"