jquery 验证：在整个表单验证后调用 ajax 并关闭引导模式表单
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15723934/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jquery validation: call ajax and close bootstrap modal form after entire form validates
提问by ducin
I'm using Bootstrap layout and the jQuery Validation Plugin. I click on a button, a modal with the form opens. The user inputs some data and improves it until everything is correct. When he submits it, it should make ajaxcall and close the modal form (but if the validation fails, there should be no ajax and no modal closing). Below is my code:
我正在使用 Bootstrap 布局和jQuery Validation Plugin。我点击一个按钮，一个带有表单的模式打开。用户输入一些数据并对其进行改进，直到一切正确。当他提交时，它应该ajax调用并关闭模态表单（但如果验证失败，则应该没有ajax，也没有模态关闭）。下面是我的代码：
ajax call
ajax调用
$('#outcomeFormDialog form').on( "submit", function( event ) {
var form = $(this);
$.ajax({
type: form.attr('method'),
url: "../php/client/json.php",
data: form.serialize(),
success: function(data, status) {
$(this).modal('hide');
}
});
event.preventDefault();
});
current validation code:
当前验证码：
$('#outcomeFormDialog form').validate(
{
rules: {
amount: {
money: true,
required: true
},
comment: {
required: false
}
},
highlight: function(element) {
$(element).closest('.control-group')
.removeClass('success').addClass('error');
},
success: function(element) {
element
.addClass('valid').closest('.control-group')
.removeClass('error').addClass('success');
}
});
As far as I understood, jquery validation's successcorresponds to each form element rather than entire form - so checking entire form validation should be done some other way.
据我了解，jquery 验证success对应于每个表单元素而不是整个表单 - 因此检查整个表单验证应该以其他方式完成。
This is my form (mustache-driven):
这是我的表格（小胡子驱动）：
<div id="outcomeFormDialog" class="modal hide fade" role="dialog">
<form class="form-horizontal well" data-async data-target="#outcomeFormDialog" method="POST">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h3 id="myModalLabel">Add outcome</h3>
</div>
<div class="modal-body">
<fieldset>
<input name="type" type="hidden" value="add_outcome" />
<div class="control-group">
<label class="control-label" for="amount">Amount</label>
<div class="controls">
<div class="input-prepend">
<span class="add-on">{{ currency }}</span>
<input type="text" name="amount" class="input-xlarge" placeholder="00.01" />
</div>
</div>
</div>
<div class="control-group">
<label class="control-label" for="comment">Comment</label>
<div class="controls">
<input type="text" name="comment" class="input-xlarge" placeholder="Comment here..." />
</div>
</div>
</fieldset>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary">Save outcome</button>
</div>
</form>
</div>
回答by Sparky
You have a couple popular issues and misconceptions regarding this plugin:
您对这个插件有几个流行的问题和误解：
You do not need a
submithandler. Theclickevent of thesubmitbutton is automatically captured and handled by this plugin.As per the docs, you are supposed to put your
ajaxwithin the plugin'ssubmitHandlercallback option.
您不需要
submit处理程序。按钮的click事件submit由该插件自动捕获和处理。根据 docs，您应该将您的
ajax放在插件的submitHandler回调选项中。
submitHandler: Callback, Default: default (native) form submit
Callback for handling the actual submit when the form is valid. Gets the form as the only argument. Replaces the default submit. The right place to submit a form via Ajax after it validated.
submitHandler：回调，默认：默认（原生）表单提交
回调，用于在表单有效时处理实际提交。获取表单作为唯一参数。替换默认提交。验证后通过 Ajax 提交表单的正确位置。
Assuming your ajaxis written properly, re-arrange your code into something more like this:
假设您ajax的代码编写正确，请将您的代码重新排列为更像这样的内容：
$(document).ready(function () {
$('#outcomeFormDialog form').validate({ // initialize plugin
rules: {
amount: {
// money: true, //<-- no such rule
required: true
},
comment: {
required: false // superfluous; "false" same as leaving this rule out.
}
},
highlight: function (element) {
$(element).closest('.control-group')
.removeClass('success').addClass('error');
},
success: function (element) {
element.addClass('valid').closest('.control-group')
.removeClass('error').addClass('success');
},
submitHandler: function (form) {
// form validates so do the ajax
$.ajax({
type: $(form).attr('method'),
url: "../php/client/json.php",
data: $(form).serialize(),
success: function (data, status) {
// ajax done
// do whatever & close the modal
$(this).modal('hide');
}
});
return false; // ajax used, block the normal submit
}
});
});
Working DEMO: http://jsfiddle.net/duAkn/
工作演示：http: //jsfiddle.net/duAkn/
