jQuery Validate 停止表单提交答案

【问题标题】：jQuery Validate stop form submitjQuery Validate 停止表单提交
【发布时间】：2013-07-24 08:15:03
【问题描述】：

我正在使用 jQuery 验证表单，但是当表单被验证时，它会重新加载或提交我想要停止该操作的页面。我已经使用了 event.preventDefault()，但是它不起作用。

这是我的代码：

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

【问题讨论】：

你把e.preventDefault()放错地方了。它位于 if 语句中，仅在表单有效时运行。
如果表单有效，它会，但无论如何它都在错误的地方。
return true; in if(isValid) 块

标签： javascript jquery jquery-validate

【解决方案1】：

submitHandler 是插件内置的回调函数。

submitHandler（默认：原生表单提交）：

表单有效时处理实际提交的回调。获取形式作为唯一的论据。替换默认提交。正确的验证后通过 Ajax 提交表单的地方。

由于submitHandler 自动捕获提交按钮的点击，并且只在有效表单上触发，因此您不需要另一个提交处理程序，也不需要使用valid() 来测试表单。

您的代码可以替换为：

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

【讨论】：

在哪里指定要提交的action url？
@coding_idiot，因为他想使用preventDefault()，所以假设OP正在submitHandler中进行Ajax提交。如果没有 submitHandler 函数，<form> 元素上的默认 action 将被触发。
谢谢，它有效。但不幸的是，我的输入字段名称为dot。请在此处查看我的问题 - stackoverflow.com/questions/20219923/…
@coding_idiot，你不应该像这样劫持 cmets。并且有人已经发布了您问题的正确答案。
当我在这里发表评论时，它并不存在。很抱歉给您带来不便。

【解决方案2】：

我将这个基本结构用于我所有的 JS 验证，它可以满足您的要求

$('#form').on('submit', function() {
    // check validation
    if (some_value != "valid") {
        return false;
    }
});

您不需要e.preventDefault(); 和return false; 语句，它们的作用相同。

【讨论】：

不完全是。 jQuery 事件处理程序中的 return false = e.preventDefault() 和 e.stopPropagation()

【解决方案3】：

插件为有效和无效的表单提交尝试提供回调。如果您提供 submitHandler 回调，则表单不会自动提交到服务器。

$("#step1form").validate({
   submitHandler : function()
   {
        // the form is valid 
        $(".first_step_form").fadeOut();
        if(counter == 3){
            $(".second_step_summary").fadeIn();
            // etc
        }
   }
});

【讨论】：