Modify jquery-validation to make your verification prompt more elegant

The jquery-validation verification function is powerful, so I will not talk about it here. But his prompt is not so beautiful. Is there a way to change his prompt method? The official website seems to have some modification methods. I am too lazy to read them. The documents are all in English. ^_^! Poor English. In fact, I still want to localize the original... SyntaxHighlighter. all ();

The jquery-validation verification function is powerful, so I will not talk about it here. But his prompt is not so beautiful. Is there a way to change his prompt method? The official website seems to have some modification methods. I am too lazy to read them. The documents are all in English. ^_^! Poor English. In fact, I still want to localize it. The original version is a prompt in English. By the way, the prompt is also changed to Chinese. In addition, some common verification methods will be added, and the addMethod will no longer be needed in the future, enrich the verification methods. Let's just modify it. What should we change? Here are some images.

 

This is the original prompt method.

 

 

Prompt method after modification

The original version has only three States. verification is successful due to a verification error before verification.

Status after modification. Focus is obtained before verification, verification error is performed, verification is successful, and the status remains.

Use Notepad ++ to open the original js version. Why do I use Notepad ++ to open it? Notepad ++ can fold the method block for easy searching.

To implement such a function, there must be four classes. The original version already has error and valid. we add two normal classes and focus classes that are not verified and get focus.

Here we add the following code to line 1:

[Javascript]
ErrorClass: "error ",
ValidClass: "valid ",
NormalClass: "normal ",
FocusClass: "focus ",
SignClass: "tip", // This class indicates a prompt label.
On the page, we only need to write it like this (of course we need to write it in form)
[Html]
 
 
Next, we modify the onfocusin event that obtains the focus in sequence, the onfocusout event that loses the focus, and the onkeyup event that is pressed by the key, which can be seen by the name. The Code has just been modified.

Modified

[Javascript]
Onfocusin: function (element, event ){
This. lastActive = element;
// First, sort out the style, remove it, and add it.
This. addWrapper (this. errorsFor (element ))
. RemoveClass (this. settings. errorClass)
. RemoveClass (this. settings. validClass)
. RemoveClass (this. settings. normalClass)
. AddClass (this. settings. focusClass );
This.addwrapper(this.errorsfor(element?#.html (this. errorsFor (element). attr ("tip "));
// Hide error label and remove error class on focus if enabled
If (this. settings. focusCleanup &&! This. blockFocusCleanup ){
If (this. settings. unhighlight ){
This. settings. unhighlight. call (this, element, this. settings. errorClass, this. settings. validClass );
}
// This. addWrapper (this. errorsFor (element). hide ();
This. addWrapper (this. errorsFor (element). removeClass (this. settings. errorClass)
. RemoveClass (this. settings. validClass). addClass (this. settings. normalClass );
}
},
Onfocusout: function (element, event ){
This. addWrapper (this. errorsFor (element ))
. RemoveClass (this. settings. errorClass)
. RemoveClass (this. settings. focusClass)
. RemoveClass (this. settings. validClass)
. AddClass (this. settings. normalClass );
If (! This. checkable (element) & (element. name in this. submitted |! This. optional (element ))){
This. element (element );
}
},
// Do not modify
Onkeyup: function (element, event ){
If (event. which === 9 & this. elementValue (element) === ''){
Return;
} Else if (element. name in this. submitted | element === this. lastActive ){
This. element (element );
}
},
After these modifications, they do not work. Next, modify the showLabel method.

[Javascript]
ShowLabel: function (element, message) {// Display Error
Var label = this. errorsFor (element );
If (label. length ){
// Refresh error/success class
Label. removeClass (this. settings. validClass)
. RemoveClass (this. settings. focusClass)
. RemoveClass (this. settings. normalClass)
. AddClass (this. settings. errorClass );
Label.html (message );
// You do not need to determine whether the generated attribute exists,
// Because class = tip already indicates a prompt label
// Check if we have a generated label, replace the message then
// If (label. attr ("generated ")){
// Label.html (message );
//}
} Else {
// Create label
Label = $ ("<" + this. settings. errorElement + "/> ")
. Attr ({"for": this. idOrName (element )})
//. Attr ({"for": this. idOrName (element), generated: true })
. AddClass (this. settings. signClass) // Add the class marked as the prompt label.
. AddClass (this. settings. errorClass)
. Html (message | "");
If (this. settings. wrapper ){
// Make sure the element is visible, even in IE
// Actually showing the wrapped element is handled elsewhere
Label = label. hide (). show (). wrap ("<" + this. settings. wrapper + "/>"). parent ();
}
If (! This. labelContainer. append (label). length ){
If (this. settings. errorPlacement ){
This. settings. errorPlacement (label, $ (element ));
} Else {
Label. insertAfter (element );
}
}
}
If (! Message & this. settings. success ){
Label. text ("");
If (typeof this. settings. success = "string "){
Label. addClass (this. settings. success );
} Else {
This. settings. success (label, element );
}
}
This. toShow = this. toShow. add (label );
},

Modify the hideErrors method.
[Javascript]
HideErrors: function (){
This. addWrapper (this. toHide). removeClass (this. settings. errorClass)
. RemoveClass (this. settings. normalClass)
. RemoveClass (this. settings. focusClass)
.Addclass(this.settings.validclass(.html ("correct input ");
// This. addWrapper (this. toHide). hide ();
},

A method is missing, so you can find the label for the error message. You do not need to search for the label based on calss = error.
You only need to find the label with the tag.
[Css]
Errors: function (){
// Var errorClass = this. settings. errorClass. replace ('','.');
// Return $ (this. settings. errorElement + "." + errorClass, this. errorContext );
Return $ (this. settings. errorElement + "." + this. settings. signClass, this. errorContext );
},

Next, we need to do one thing, that is, display the tip information during initialization. The label's tip = "Please enter the user name" attribute will be used.
Since it is initialization, let's look at the init method. Locate the Init method in about 300 lines, and add the following code.
[Javascript]
This. reset ();
// A prompt is displayed during initialization.
$. Each (this. errors (), function (){
Certificate (this).html ($ (this). attr ("tip "));
});
Simple code.
After this prompt is complete, modify the style.

[Css]
Label. error, label. valid, label. focus, label. normal {
Background: url (/content/images/ico_warn.png) no-repeat 4px-197px;
Font: 12px/1 verdana, simsun, sans-serif;
Margin: 0;
Padding: 4px 0px 4px 23px;
}
 
Label. normal {background-position: 4px-197px; color: #999999 ;}
Label. error {background-position: 4px-253px; color: # B52726 ;}
Label. valid {background-position: 4px 3px; color: # 2666AF ;}
Label. focus {background-position: 4px-365px; color: #999999 ;}

Next, you can modify the prompt information.
[Html]
Messages :{
Required: "required ",
Remote: "Please fix this field .",
Email: "invalid email address, please confirm ",
Url: "The URL format is incorrect. Please confirm ",
Date: "date Format error, please confirm ",
DateISO: "Date Format (ISO) error. Please confirm .",
Number: "enter a number ",
Digits: "enter an integer ",
Creditcard: "incorrect credit card number format ",
Similar to: "Two inputs are inconsistent ",
Accept: "Incorrect suffix ",
Mobile: "Incorrect mobile Phone Number Format ",
Tel: "Incorrect Phone Number Format ",
MobileOrTel: "Incorrect Mobile Phone Number Format ",
Qq: "Incorrect qq number format ",
Chinese: "enter chinese ",
Idcard: "Incorrect ID card number format ",
Letter: "enter a letter ",
Ip: "ip address format error ",
Zipcode: "Incorrect zip code format ",
Maxlength: $. validator. format ("up to {0} characters allowed "),
Minlength: $. validator. format ("at least {0} characters are entered "),
Rangelength: $. validator. format ("the character length is between {0} and {1 "),
Range: $. validator. format ("the value is between {0} and {1 "),
Max: $. validator. format ("the maximum value cannot exceed {0 }"),
Min: $. validator. format ("the minimum value is not less than {0 }")
},
Add some methods
[Javascript]
Modify or add in methods: {...}

Another is to modify the remote verification method, which is said to be incorrect. I wonder if this version has been changed.
Another one is

[Javascript]
ClassRuleSettings :{
Required: {required: true },
Email: {email: true },
Url: {url: true },
Date: {date: true },
DateISO: {dateISO: true },
Number: {number: true },
Digits: {digits: true },
Creditcard: {creditcard: true}
},
Class verification.
That is

[Html]
 
This is what class = "required" is used for automatic verification.