jquery-plugins - jquery 表单验证 ajaxSubmit()

Question

我对这个 jquery 表单验证 ajaxSubmit() 感到非常沮丧；

在chrome中，它似乎甚至没有点击submitHandler就默默地失败了，firefox确实如此，但仍然继续到action =“contact.php”页面。我期望它只是在后台发布并可能返回结果，但无法让它以这种方式工作。

编辑:找到了解决此问题的方法，如果其他人感兴趣，请将这行代码放在您的 dom 中的某个位置。

// disable HTML5 native validation and let jquery handle it.
    $('form').attr('novalidate','novalidate');

HTML 表单:

<form method="post" action="contact.php" id="contact">
    <fieldset>
        <input type="text" id="email" class="required email" name="email"  maxlength="30" value="youremail @ example.com" />
        <input type="text" id="subject" class="required" name="subject" maxlength="24" value="Enter your subject" />
        <textarea id="msg" class="required textarea" name="msg" cols="30" rows="5">Reason for contact.</textarea>
        <input type="submit" class="formBtn" value="Punch me an Email" />
    </fieldset>
</form>

JQuery:

$(window).load(function(){
    $('#contact').validate({
            rules:{
                email:{required: true, email:true},
                subject:{required: true, minlength: 5},
                msg:{required: true, minlength: 50}
            },
            messages:{
                email:'',
                subject: '',
                msg: ''
            },
            invalidHandler:function(){
                $('div.error').hide();
            },
            focusInvalid:true,
            onfocusout:false,
            submitHandler: function() {
               // never hits with chrome, and alert works in FF4, 
               // but still goes to contact.php
               $('#contact').ajaxSubmit();
           }
        });
});

Answer 1

我不太熟悉验证插件，但我会尝试相反的方式，通过在表单插件的 beforeSubmit 事件中验证表单:

$('#contact').ajaxForm({
  beforeSubmit: function() {
    $('#contact').validate({ /* ... */ });
    return $('#contact').valid();
  },
  success: function(resp) {
    alert(resp);
  }
});