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

它在表单上添加了一个on submit处理程序：

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

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

调暗表单容器
使用半透明对象覆盖表单容器，以便您无法访问控件
使用动画，划像，幻灯片或淡入淡出
等。或按照上述基本步骤执行任何操作

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

2 个答案: