Validation plugin validate form Ajax commit validation issues

Source: Internet
Author: User
Tags button type

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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.