jquery - 验证不会通过ajax检查提交表单

Question

这个问题已经有答案了:

Form submit button not working in Google Chrome (jQuery Validate) (2 个回答)

已关闭 10 年前。

我正在使用jQuery Validate plugin通过发出 ajax 请求来验证表单中的电子邮件字段，以确保电子邮件尚未被其他用户占用。我通过添加如下规则来做到这一点:

//make sure email field is on form before adding rule
if ($(".unique_email").is("*")) {
    //remote validation
    $(".unique_email").rules("add", {
        remote: "http://test.nethop.com/test.cgi",
        messages: {
            remote: "This email is already in use"
        }
    });
}

但是，每当我在表单上点击“提交”时，它都会首先执行 ajax 请求以确保电子邮件未被占用，然后即使电子邮件验证正常，也不会提交。您必须再点击一次“提交”，然后它就会提交。有谁知道这是为什么吗？

我已经设置了 jsfiddle演示问题。如果您使用chrome开发者工具或firebug，您可以看到正在发出的ajax请求，返回 true ，仍然没有提交。

HTML

<form id="listing" method="post">
    <ul>
        <li>
            <label for="username">Email *</label>
            <input type="text" name="username" id="username" autocomplete="off"
            class="email required unique_email" value="test@test.com" />
        </li>
        <li>
            <input type="submit" name="submit" id="submit" class="btn" value="Save"
            />
        </li>
    </ul>
</form>

完整脚本:

$(document).ready(function () {
    var validator = $("form").validate({
        onkeyup: false,
        onblur: true,
    });

    if ($(".unique_email").is("*")) {
        //remote validation
        $(".unique_email").rules("add", {
            remote: "http://test.nethop.com/test.cgi",
            messages: {
                remote: "This email is already in use"
            }
        });
    }
});

Answer 1

好吧，这有点奇怪，所以请耐心等待。

事实上，您有一个带有 name/id submit 的 input 导致了问题。我认为这是因为在幕后，jQuery validate 正在调用 form.submit。在您的情况下，form.submit 是一个表单元素，因此这不会执行任何操作。

如果您重命名submit按钮，一切都会正常。

示例: http://jsfiddle.net/42TK4/7/