Question

我遇到远程验证问题，导致表单提交两次（并输入两次成功/错误处理程序）。原始版本是一个ASP.NET MVC应用程序，具有不引人注意的验证和用于AJAX提交的jQuery表单，但我已经能够减少到以下内容：

remote.json

“真”

的test.html

<!doctype html>
<title>test</title>

<form action="" method="post">
    <input name="foo" type="text" value="foo">
    <br>
    <input name="bar" type="text" value="bar">
    <br>
    <input type="submit">
</form>

<script src="//code.jquery.com/jquery-2.0.3.js"></script>
<script src="//ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.js"></script>

<script>
    $("form").validate(
    {
        rules:
        {
            foo: { remote: { url: "remote.json" } },
            bar: { required: true }
        }
    });

    $("form").on("submit", function ()
    {
        console.log("entering the submit handler");

        if ($(this).valid())
        {
            console.log("form is valid");
        }
        else
        {
            console.log("form is invalid");
        }

        return false;
    });
</script>

当远程验证返回"true"时，这是控制台输出：

GET http://localhost/validation/remote.json?foo=foo 200 OK
  进入提交处理程序
  表格有效
  进入提交处理程序
  表格有效

当远程验证返回"false"时，这是控制台输出：

GET http://localhost/validation/remote.json?foo=foo 200 OK
  进入提交处理程序
  表格有效

我在提交处理程序中做错了什么？它适用于所有其他形式（数十个）。或者这是库中的另一个错误（如果有，是否有解决方法）？

Answer 1

您的外部提交处理程序将触发表单是否有效，并且您的return false也会阻止表单的常规提交，从而干扰插件的正常操作。

这就是为什么开发人员提供了特殊的回调处理程序，可以在点击时自动捕获提交事件。

$("form").validate({
    rules: {
        foo: {
            remote: { 
                url: "remote.json"
            } 
        },
        bar: { 
            required: true 
        }
    },
    submitHandler: function(form) {
        // form is valid - do stuff, ajax?
        return false; // block the default form action if using ajax
    },
    invalidHandler: function(event, validator) {
        // form is invalid - do stuff
    }
});

DEMO：http://jsfiddle.net/MwXN7/

请参阅文档：http://jqueryvalidation.org/validate/

如果必须使用插件提供的回调函数外部的处理程序，click处理程序在这方面效果最好......

$('#myButton').on('click', function (e) {
    e.preventDefault();  // block the default submit
    if ($('form').valid()) {
        console.log("form is valid");
        $('#myform').submit(); // now submit the form
    } else {
        console.log("form is invalid");
    }
});

DEMO 2：http://jsfiddle.net/MwXN7/1/

虽然通过比较两个演示可以看到，但第二个使用了大量外部代码来复制插件自动处理的内容。

Answer 2

我有同样的问题，我修复了它通过加载模糊事件触发远程验证。

$(document).ready(function () {
    $("input[name=foo]").blur();
});

远程验证会导致双重提交

2 个答案: