JQuery Validate plug-in Validation form usage examples

Previously used jquery validator to do some projects, but recently picked up, discovery features upgraded, some of the previous use of the method is already in the error, and then rearrange a blog to summarize the latest jquery form validate use tutorial.

How to use JQuery Validate

We often ask for user form submission events, validation events after loss of focus on form elements, methods of error display, validation of form rules, and validation of messages for form rules.

The code is as follows

Copy Code

JQuery (document). Ready (function ($) {   $ ("#cf-order-checkout-form"). Validate ({    / /Custom handler to call named function "Do_payment"     submithandler:function (form) {  &nb sp;    $ (form). attr ("target", "_blank");       form.submit ();    },    //Www.111cn.net Validate the previously selected element when the user Clicks out     onfocusout:function (Element) {       $ (element). Valid ();    }, Errorplacement:function (Error, Element) { if (element.attr (' type ') = = ' Radio ') { Error.appendto (Element.parent (). parent ()); } else { Error.appendto (Element.parent ()); } }, Validation rules Rules: { ' Address[province] ': {required:true}, ' address[city] ': {required:true}, ' Address[county] ': {required:true}, ' Transaction[payment] ': {required:true} }, Validation messages Messages: { ' Address[province] ': { Required: "Please select your province or autonomous region." " }, ' address[city] ': { Required: "Please select your city, region or autonomous prefecture." " }, ' Address[county] ': { Required: "Please select your district or county." " }, ' Transaction[payment] ': { Required: "Please choose a payment method." " } } }); });

For other uses, see the official API functions.

JQuery Validate Submithandler causes dead loops

To prevent form submission death loops, you should use Form.submit () rather than $ (form). Submit ();

The Submithandler form variable converts the Dom,dom object into a jquery object, plus $ (), and then it can be manipulated using jquery syntax.

Correct use of the Submit form method:

The code is as follows	Copy Code
Submithandler:function (form) { Form.submit (); }

That's right.

JQuery Validate Ajax Submit
We can define the Submithandler function using jquery ajax to request processing.

The code is as follows

Copy Code

$ ("#user-login"). Validate ({ Custom handler to call named function "Do_payment" Submithandler:function (form) { $.ajax ({ Type: "POST", URL: '/ajax/user/login ', Data: {"name": $ (form). Find (' #edit-name '). Val (), "Pass": $ (form). Find (' #edit-pass '). Val ()}, DataType: "JSON", Success:function (data) { if (Data.result) { Location.reload (); } else if (data.message) { alert (data.message); } else { Alert (' password error '); } } }); }, Validate the previously selected element when the user clicks out Onfocusout:function (Element) { $ (Element). valid (); }, Errorplacement:function (Error, Element) { Error.appendto (Element.parent ()); } });

Finally have to thank the following jquery Validate plugin author.