验证插件validate 表单ajax提交验证问题

1.按钮类型type="submit"

2.form的action不能写，否则默认就提交表单了，不会再执行ajax

3.ajax方法写在submitHandler方法里面

例如：

validate设置默认参数：

/*
* 表单验证
* */
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写法：

<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">姓名：</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">手机：</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">物业公司：</label>
<div class="controls">
<select name="company" class="span3 J_CompanyList" data-rule-required="true" data-msg-required="请选择物业公司">
<option value>请选择物业公司</option>
</select>
</div>
</div>
<div class="control-group control-with-input">
<label class="control-label">小区：</label>
<div class="controls">
<select name="community" class="span3 J_CommunityList" data-rule-required="true" data-msg-required="请选择小区">
<option value>请选择小区</option>
</select>
</div>
</div>
<div class="control-group control-with-input">
<label class="control-label">楼宇：</label>
<div class="controls">
<select name="building" class="span3 J_BuildingList" data-rule-required="true" data-msg-required="请选择楼宇">
<option value>请选择楼宇</option>
</select>
</div>
</div>
<div class="control-group control-with-input">
<label class="control-label">单元：</label>
<div class="controls">
<select name="cell" class="span3 J_CellList" data-rule-required="true" data-msg-required="请选择单元">
<option value>请选择单元</option>
</select>
</div>
</div>
<div class="control-group control-with-input">
<label class="control-label">房号：</label>
<div class="controls">
<select name="house" class="span3 J_HouseList" data-rule-required="true" data-msg-required="请选择房号">
<option value>请选择房号</option>
</select>
</div>
</div>
<div class="control-group control-with-input">
<label class="control-label">性别：</label>
<div class="controls">
<input type="radio" value="1" name="sex" checked><label class="label-inline">男</label>
<input type="radio" value="2" name="sex"><label class="label-inline">女</label>
</div>
</div>
<div class="control-group control-with-input">
<label class="control-label">身份证：</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">保存</button>
<button class="btn" type="button" data-dismiss="modal" aria-hidden="true">取消</button>
</div>
</form>

 

js写法：

$('#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);
})
});
}
});
});