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是：

“在表单有效时处理实际提交的回调。”

（它也是提交表单所需的任何ajax的正确位置。）

DEMO ：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都会变得丑陋且多余。可以使用jQuery click handler轻松替换onclick。但是，在这种情况下，您根本不需要任何点击处理程序，因为内置的submitHandler已经捕获了点击事件。您只需将输入type更改为submit。

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

引用OP：

“我有以下表格，通过ajax添加到页面”

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

DOM就绪处理函数$(document).ready()仅在DOM在正常页面加载时完全构造时触发。将代码加载到ajax()的页面时，它将不执行任何操作。您尚未显示将此内容写入页面的代码，但如果您要初始化Validate插件，则需要将$('#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=。

Answer 2

你应该做

if (validator.form()){}

而不是

$("#login_form").valid().

Answer 3

当您使用jQuery validate插件时，一个好的做法是在验证器代码中处理表单提交。 jQuery validate插件只针对该事件进行了submitHandler回调，即，当您的表单已经过验证并且即将提交时。您可以将自定义逻辑放在此回调中，也可以在此回调中调用check_login()。从此回调中返回false将阻止表单提交。检查下面的代码

       var validator = $("#login_form").validate({
           rules: {
              user_email: {
                 required: true,
                 email: true
              },
              password: {
                 required: true
              }
           },
           /* following callback will be called when the form has passed validation*/
           submitHandler: function () {
              //call your custom code here and return true/false to submit/cancel form
              check_login();

              //in-case you've missed a return statement in your custom function
              return false;
           }
    });

并从按钮中删除check_login()

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

另请注意我已将按钮类型从button更改为submit。

<强> P.S。对于精明的读者：我知道可能还有其他方法可以解决这个问题，因为所有问题都是如此。

Answer 4

尝试调用validator.resetForm（）或可能$（'＃login_form'）。data（'validator'）。resetForm（）。这是一个很好的例子How to clear Jquery validation error messages?

你想要resetForm（）方法：

var validator = $("#login_form").validate(
   ...
   ...
);
// to reset
$("#some_element_id").click(function() {
    validator.resetForm();
});

Answer 5

这是我的表格：

<form method="post" class="form" name="form_destination" id="form_destination">
  <label style="margin-bottom: 10px" class="white block text-left">Enter country code followed by phone number then click Search <span class="badge badge-primary pointer tax-help" data-container="body" data-toggle="popover" data-placement="top" data-content="Enter the number you wish to call, recharge or send sms to. You must first enter the country code followed by the phone number, then press Search." data-original-title="" title="" aria-describedby="popover">?</span></label>
       <div class="input-group">
          <input type="tel" class="form-control text-center" placeholder="Type number" style="font-weight: 400;font-size: x-large;" name="destination" id="destination">
          <span class="input-group-addon pointer btn-naranja" id="btn_buscar"><i class="fa fa-search"></i> Search</span>
       </div>
</form>

JavaScript解决方案：

$('#form_destination').on('submit', function(e) {
    e.preventDefault();
    $('#destination').focus();
    $('#form_destination').validate({
        rules: {
            destination: {
                required: true,
                minlength: 7,
                digits: true,
            }
        }, 
        messages: {
            destination: {
                required: "Please enter a phone number",
                minlength: "Please write at least 7 phone numbers",
                digits: "Please enter the phone number",
            }
        }, 
        submitHandler(form) {
            /* AJAX JQuery */
            /* your code */
        }
    });
});

$('#btn_buscar').on('click', function(event) {
    $('#form_destination').submit();
    $('#form_destination').submit();
    /* this my solution */
});

jquery验证插件工作正常，你第一次验证，但不是后续时间

5 个答案: