jquery 验证插件第一次验证时工作正常，但随后就不行

Question

我有以下表单，通过ajax添加到页面

<script>
    $(document).ready(function() {

        jQuery.validator.setDefaults({
            errorPlacement: function(error, element) {
                 error.appendTo('#invalid_' + element.attr('id'));
            }
        });

        var validator = $("#login_form").validate({
            rules: {
                user_email: {
                  required: true,
                  email: true
                },
                password: {
                    required: true
                }
            }
        });
    });

</script>

<form id="login_form">
<center><br/><br/><br/>
    <div class="login_div">
        <center><h3>Log In</h3>
        <table align="center" width="400px">
            <tr><td class="input_td">Email:</td><td class="textfield_td"><input type="text" class="textfield" id="user_email" name="user_email"/></td></tr>
            <tr><td colspan="2" id="invalid_user_email"></td></tr>
            <tr><td class="input_td">Password:</td><td class="textfield_td"><input type="password" class="textfield" id="password" name="password"/></td></tr>
            <tr><td colspan="2" id="invalid_password"></td></tr>
            <tr><td colspan="2" class="error_text" id="login_error"></td></tr>
        </table>
        <input  type="button" onclick="check_login();" value="Log In"/></center>
    </div>
</center>
</form>

check_login 方法具有以下结构:if($("#login_form").valid()) {do Something} else {return;}

当我第一次单击“登录”按钮时，表单验证正确，例如如果缺少字段或提供了无效的电子邮件，则会显示相应的错误消息。但是，如果我再次单击登录按钮，即使字段丢失或存在无效电子邮件且不显示错误消息，valid() 方法也会返回 true。

感谢您对此的任何说明

编辑:此解决方案似乎适用于登录是按钮 ID 的情况

$("#login").click(function() {

    validator.resetForm();
    if(validator.form()) {
         alert('valid');

    }
    else {
        return;
    }


});

Answer 1

您不需要 if($("#login_form").valid()) {do something}因为插件内置了submitHandler已经遵循了完全相同的逻辑。

As per documentation ，submitHandler是:

"Callback for handling the actual submit when the form is valid."

(这也是放置表单提交所需的任何 ajax 的正确位置。)

演示:http://jsfiddle.net/uxzH6/

$(document).ready(function () {

    $('#login_form').validate({
        rules: {
            user_email: {
                required: true,
                email: true
            },
            password: {
                required: true
            }
        },
        submitHandler: function (form) {
            // any ajax would go here
            alert('valid form submitted'); // for demo
            return false;
        }
    });

});

<小时/>

您的按钮:

<input type="button" onclick="check_login();" value="Log In"/>

您正在使用 jQuery，因此任何内联 JavaScript 都会变得丑陋且多余。 onclick可以轻松替换为 jQuery click handler 。但是，在这种情况下，您根本不需要任何点击处理程序，因为内置 submitHandler已经捕获了点击事件。您只需更改输入type至submit .

<input type="submit" value="Log In"/>

<小时/>

引用OP:

"I have the following form which is added to a page via ajax"

<script>
    $(document).ready(function() {
    ...

DOM 就绪处理函数，$(document).ready() ，仅当 DOM 在正常页面加载上完全构建时才会触发。当代码加载到带有 ajax() 的页面时，它不会执行任何操作。 。您尚未显示将其写入页面的代码，但如果您想初始化验证插件，则需要移动 $('#login_form').validate({...代码写入任何写入表单 HTML 的代码。

$.ajax({
    // code to load the form's HTML into the page
    // initialize plugin here after ajax is complete
    complete: function() {
        $('#login_form').validate({ ... });
    }
    ....

<小时/>

最后，请validate the HTML你的表格。您正在使用已弃用的代码，例如 <center></center>和<table align= .