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);
  }
});

Answer 2

在触发提交事件后调用

submitHandler，因此ajaxForm在提交事件之后注册自己的提交事件处理程序，这可能为时已晚，无法捕获它。

您不必嵌套两个插件，只需先验证然后再激活第二个：

$('#contact').validate({...});
$('#contact').ajaxForm();

这样，首先调用验证事件处理程序，如果事件无效，则在到达ajax提交处理程序之前停止事件。

Answer 3

<form id="Form1">    
...    
<button type="submit" onclick="return SendData()"> 
</form>

<script>

$(function () {
   $("#Form1").validate();
});

function SendData(){
   if ($("#Form1").valid()) {
      $.ajax({
         url: "/WebService/....",
         type: "post",
         dataType: "json"
         //....
      });

      //do ajax but not submit
      return false;
   }
   // checkdata
   return true;
}
</script>

jquery表单验证ajaxSubmit（）

3 个答案: