如何使用 jquery.validate 插件使整个表单无效？

Question

当发生某些事情（来自服务器的响应或由于外部条件而无法继续）时，我想使整个表单无效（不仅仅是特定字段）。

我的示例是用户在等待来自服务器的 AJAX 响应时不应该能够提交表单。所有后续字段都被禁用，直到 AJAX 回来，所以表单是有效的，允许用户提交它。

<form action="" method="post">
    <select name="input1" required="required">
        <option value="A">A</option>
        <option value="B">B</option>
    </select>
    <select name="input2" id="input2" disabled="disabled" required="required">
        <option value=""></option>
        <option value="foo">Foo</option>
    </select>
    <input type="submit" value="Submit" />
</form>
<p></p>
<p>Fake response from server
    <button id="response">Fake</button>
</p>

JS：

var waitingForServer;

waitingForServer = true;

$('form').validate();

$('#response').on('click', function() {
  waitingForServer = false;
  return $('#input2').prop('disabled', false);
});

See live demo

如何防止用户在 AJAX 请求完成之前提交表单？

Answer 1

它可以在表单上添加一个提交处理程序：

$('form').on('submit', function (evt) {
    if (waitingForServer) {
        evt.preventDefault();
    }
});

New live demo

我看到的唯一问题是不知道这是否一致（jquery.validate 处理程序是否有时会在此之前触发）。

我当然愿意接受更好的答案。

Answer 2

引用 OP：

“我该如何防止这种情况发生？”

我不太确定你的意思是什么，因为你的整个问题有点不清楚。

但是，当我使用ajax() 提交表单时，为了防止进一步交互，我立即从页面中删除表单，显示微调器动画，然后在服务器响应后显示确认消息。我在插件内置的submitHandler 函数中完成所有这些工作。

$('#myform').validate({
    // rules & options,
    submitHandler: function(form) {
        $('#formWrapper').hide();         // make the form disappear
        $('#spinner').show();             // show the animated spinner
        $.ajax({                          // submit the form via ajax
            url: 'path-to-server',        // url to submit to
            data: $(form).serialize(),    // serialized form data
            success: function(msg) {      // response from server
                $('#message').html(msg);  // load message into hidden div
                $('#spinner').hide();     // hide the animated spinner
                $('#message').show();     // show the response message
            }
        });
        return false;                     // blocks default form action when using ajax
    }
});

这只是一个例子。您可以轻松地将其修改为...

• 使表单容器变暗
• 用半透明对象覆盖表单容器，这样您就无法访问控件
• 使用动画、擦除、幻灯片或淡入淡出
• 等。或按照上述基本步骤执行任何操作