jQuery jQuery验证停止表单提交
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17828560/
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 Validate stop form submit
提问by monk
I am using jQuery validate to the form, but when the form is validated it reloads or submits the page I want to stop that action. I already use the event.preventDefault(), but it doesn't work.
我正在对表单使用 jQuery 验证，但是当表单被验证时，它会重新加载或提交我想停止该操作的页面。我已经使用了 event.preventDefault()，但它不起作用。
Here is my code:
这是我的代码：
$("#step1form").validate();
$("#step1form").on("submit", function(e){
var isValid = $("#step1form").valid();
if(isValid){
e.preventDefault();
// Things i would like to do after validation
$(".first_step_form").fadeOut();
if(counter == 3){
$(".second_step_summary").fadeIn();
$(".third_step_form").fadeIn();
$(".third_inactive").fadeOut();
}else if(counter < 3){
$(".second_step_form").fadeIn();
$(".third_inactive").fadeIn();
}
$(".first_step_summary").fadeIn();
$(".second_inactive").fadeOut();
}
return false;
});
回答by Sparky
The submitHandleris a callback function built into the plugin.
该submitHandler是内置插件的回调函数。
submitHandler(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 提交表单的正确位置。
Since the submitHandlerautomatically captures the click of the submit button and only fires on a valid form, you do not need another submit handler, nor do you need to use valid()to test the form.
由于submitHandler自动捕获提交按钮的点击并且仅在有效表单上触发，因此您不需要另一个提交处理程序，也不需要valid()用于测试表单。
You code can be replaced with:
您的代码可以替换为：
$("#step1form").validate({
submitHandler: function(form) {
// Things I would like to do after validation
$(".first_step_form").fadeOut();
if(counter == 3){
$(".second_step_summary").fadeIn();
$(".third_step_form").fadeIn();
$(".third_inactive").fadeOut();
}else if(counter < 3){
$(".second_step_form").fadeIn();
$(".third_inactive").fadeIn();
}
$(".first_step_summary").fadeIn();
$(".second_inactive").fadeOut();
return false; // block the default submit action
}
});
回答by Novocaine
I use this basic structure for all my JS validation, which does what your asking
我将这个基本结构用于我所有的 JS 验证，它可以满足您的要求
$('#form').on('submit', function() {
// check validation
if (some_value != "valid") {
return false;
}
});
You don't need e.preventDefault();and a return false;statement, they do the same thing.
你不需要e.preventDefault();和一个return false;声明，他们做同样的事情。
回答by Dr Blowhard
The plugin provides callbacks for valid and invalid form submission attempts. If you provide a submitHandler callback then the form doesn't get submitted to the server automatically.
该插件为有效和无效的表单提交尝试提供回调。如果您提供 submitHandler 回调，则表单不会自动提交到服务器。
$("#step1form").validate({
submitHandler : function()
{
// the form is valid
$(".first_step_form").fadeOut();
if(counter == 3){
$(".second_step_summary").fadeIn();
// etc
}
}
});
