jQuery 在 ajaxForm 之前验证

Question

我尝试使用 jQuery ajaxForm 插件中的“beforeSubmit”选项来验证数据，但是即使存在无效的表单字段，表单也会提交。我哪里出错了？谢谢，

$(document).ready(function() { 
function validator(){ 
        $("#commentForm").validate();
}

    $('#commentForm').ajaxForm({ 
        dataType: 'json',
        url: "http://highlandfamilyeyecare.com/contactengine.php",
        beforeSubmit:  validator,
        success:        function(data) { 
            $('ul.form').fadeOut("slow");
            $('ul.form').html(data.formula).slideDown('slow');}
    });
});

还有 html：

<ul class="form">


    <li>    
        <form method="post" action="form.php" id="commentForm">

        <label class="white">Your Name</label>
        <input class="text-input required" type="text" name="name" /></li>

    <li>
        <label class="white">Email</label>
        <input class="text-input required email" type="text" name="email"/></li>

    <li>
        <li><input type='submit' value="Submit" />
        </form></li>

</ul>

Answer 1

beforeSubmit() 函数没有返回任何内容。

您需要：

function validator() { 
  return $("#commentForm").validate();
}

假设 $('#commentForm").validate() 存在并正确返回 true/false。

Answer 2

根据文档，验证函数必须返回false以防止表单提交。

Answer 3

假设 validate() 方法是验证插件，这是正确的做法。如果验证方法有任何错误，表单将不会提交。

    $('#commentForm').validate({
        errorClass: "invalidField",
        submitHandler: function() {
            $('#commentForm').ajaxSubmit(ajaxFormOptions);
        }
    });

其中 ajaxFormOptions 是您的提交选项。