2

我有以下通过 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;
    }


});
4

5 回答 5

2

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

根据文档，submitHandler是：

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

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可以很容易地用jQueryclick处理程序替换。但是，在这种情况下，您根本不需要任何点击处理程序，因为内置submitHandler已经捕获了点击事件。您只需要将输入更改type为submit.

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

引用操作：

“我有以下通过 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({ ... });
    }
    ....

最后，请验证表单的 HTML。您正在使用已弃用的代码，例如<center></center>和<table align=。

于 2013-05-09T16:16:26.310 回答
1

当您使用 jQuery 验证插件时，一个好的做法是在验证器代码中处理表单提交。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。

PS 给精明的读者：我知道可能有其他方法可以解决这个问题，就像所有问题一样。

于 2013-05-09T14:17:20.410 回答
1

你应该做

if (validator.form()){}

代替

$("#login_form").valid().
于 2013-05-09T14:03:47.277 回答
0

尝试调用 validator.resetForm() 或 $('#login_form').data('validator').resetForm()。这是一个很好的例子如何清除 Jquery 验证错误消息？

你想要 resetForm() 方法：

var validator = $("#login_form").validate(
   ...
   ...
);
// to reset
$("#some_element_id").click(function() {
    validator.resetForm();
});
于 2013-05-09T14:10:18.073 回答
0

这是我的表格：

<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 */
});
于 2017-07-09T18:29:36.367 回答