【问题标题】:jQuery validate before ajaxFormajaxForm之前的jQuery验证
【发布时间】:2011-01-25 04:26:57
【问题描述】:

我正在尝试使用 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>

【问题讨论】:

    标签: jquery validation ajaxform


    【解决方案1】:

    根据documentation,验证函数必须返回false 以防止表单提交。

    【讨论】:

    • +1 用于 rtfm。仍然需要知道为什么 validate 没有返回错误消息
    【解决方案2】:

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

    你会想要的:

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

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

    【讨论】:

    • 谢谢,当我将“.form”添加到函数末尾时,这有效。 ********* function validator(){ return $("#commentForm").validate().form; }
    【解决方案3】:

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

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

    ajaxFormOptions 是您提交的选项。

    【讨论】:

    • 记得加上 submitHandler: function(form) { $(form).ajaxSubmit etc.
    猜你喜欢
    • 2017-06-24
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2017-12-27
    • 1970-01-01
    • 1970-01-01
    • 2023-03-02
    • 2023-04-02
    相关资源
    最近更新 更多