Validation plugin validate form Ajax commit validation issues

1. Button type Type= "Submit"

2.form action cannot be written, otherwise the form is submitted by default and no more Ajax is executed

The 3.ajax method is written in the Submithandler method.

For example:

Validate setting Default parameters:

/*
* Form Validation
* */
if ($ ('. Form-validate '). Length > 0) {
JQuery.validator.setDefaults ({
Ignore: "",
Errorelement: ' Span ',
Errorclass: ' Help-block error ',
Errorplacement:function (Error, Element) {
Element.parents ('. Controls '). Append (Error);
},
Highlight:function (label) {
$ (label). closest ('. Control-group '). Removeclass (' ERROR success '). AddClass (' error ');
},
Success:function (label) {
Label.addclass (' valid '). Closest ('. Control-group '). Removeclass (' ERROR success '). AddClass (' success ');
}
});
}

HTML notation:

<form method= "POST" id= "J_addform" class= "Form-horizontal form-validate" >
<div class= "Modal-body" >
<div class= "Control-group control-with-input" >
<label class= "Control-label" > Name:</label>
<div class= "Controls" >
<input type= "text" name= "name" value= "" class= "Span3" data-rule-required= "true" >
</div>
</div>
<div class= "Control-group control-with-input" >
<label class= "Control-label" > Mobile:</label>
<div class= "Controls" >
<input type= "text" name= "Phone" value= "" class= "Span3" data-rule-required= "true" data-rule-phonescn= "true" >
</div>
</div>
<div class= "Control-group control-with-input" >
<label class= "Control-label" > Property company:</label>
<div class= "Controls" >
<select name= "Company" class= "Span3 j_companylist" data-rule-required= "true" data-msg-required= "Please select Property companies" >
<option value> Please select Property company </option>
</select>
</div>
</div>
<div class= "Control-group control-with-input" >
<label class= "Control-label" > Community:</label>
<div class= "Controls" >
<select name= "Community" class= "Span3 j_communitylist" data-rule-required= "true" data-msg-required= "Please select cell" >
<option value> Please select Community </option>
</select>
</div>
</div>
<div class= "Control-group control-with-input" >
<label class= "Control-label" > Building:</label>
<div class= "Controls" >
<select name= "Building" class= "span3 j_buildinglist" data-rule-required= "true" data-msg-required= "Please select a building" >
<option value> Please select building </option>
</select>
</div>
</div>
<div class= "Control-group control-with-input" >
<label class= "Control-label" > Unit:</label>
<div class= "Controls" >
<select name= "Cell" class= "span3 j_celllist" data-rule-required= "true" data-msg-required= "Please select cell" >
<option value> Please select Unit </option>
</select>
</div>
</div>
<div class= "Control-group control-with-input" >
<label class= "Control-label" > Room No.:</label>
<div class= "Controls" >
<select name= "House" class= "span3 j_houselist" data-rule-required= "true" data-msg-required= "Please select room number" >
<option value> Please select room number </option>
</select>
</div>
</div>
<div class= "Control-group control-with-input" >
<label class= "Control-label" > Sex:</label>
<div class= "Controls" >
<input type= "Radio" value= "1" name= "Sex" Checked><label class= "Label-inline" > Men </label>
<input type= "Radio" value= "2" name= "Sex" ><label class= "label-inline" > Women </label>
</div>
</div>
<div class= "Control-group control-with-input" >
<label class= "Control-label" > ID:</label>
<div class= "Controls" >
<input type= "text" name= "Idcard" value= "" class= "Span3" data-rule-idcard= "true" >
</div>
</div>
</div>
<div class= "Modal-footer" >
<button id= "J_saveadd" class= "btn btn-success" type= "Submit" > Save </button>
<button class= "btn" type= "button" data-dismiss= "Modal" aria-hidden= "true" > Cancel </button>
</div>
</form>

JS notation:

$ (' #J_SaveAdd '). Click (function () {
$ ("#J_AddForm"). Validate ({
Submithandler:function (form) {
var formData = $ (form). Serialize ();
var xmlrequest = $.ajax ({
Type: "POST",
URL: "Http://api.property.fengchao.mobi/bee-admin/Proprietor.do?action=add",
Data:formdata,
DataType: "xml"
});
Xmlrequest.done (function (XML) {
var _status = $ (XML). Find (' status '). Text ()
, _msg = $ (XML). Find (' msg '). text ();
if (_status = = ' 0 ') {
$ (' #addModal '). Modal (' hide ');
$ (' #alertModal '). Modal (' show ');
}
$ (' #alertModal '). On (' Show ', function () {
$ (this). Find (' H4 '). html (_MSG);
})
});
}
});
});

Validation plugin validate form Ajax commit validation issues