验证不会提交带有ajax检查的表单

Question

我正在使用jQuery Validate插件通过发出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,您可以看到正在创建,返回true但仍未提交的ajax请求.

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

好的,这个有点怪,所以忍受我.

您拥有input名称/ ID 的事实submit导致了问题.我认为这是因为在幕后,jQuery验证正在调用form.submit.在你的情况下,form.submit是一个表单元素,所以这没有任何作用.

如果重命名submit按钮,一切正常.

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