jquery 验证不会阻止表单提交

Question

我在这里抓狂，试图让 jquery 验证与我的表单很好地配合。

验证似乎不起作用。表单只是将自身提交到页面。我可以简要地看到页面提交之前出现的验证错误消息...

我的代码：

//HTML form
<form id="form_scheduleEvent" name="form_scheduleEvent">
  <label for="name">Name:</label><input class="short" type="text" name="name" id="name" />
  <label for="address">Address:</label><input type="text" name="address" id="address" />
  <label for="phone">Phone:</label><input type="text" name="phone" id="phone" />
  <label for="comments">Comments:</label><textarea name="comments" id="comments" /></textarea>
  <input type="submit" id="submitRequest" value="Add"/>
</form>


//jquery
//Validation rules
$('#form_scheduleEvent').validate({
rules: {
    name : {required: true, maxlength: 45},
    address : {required: true, maxlength: 45},
    phone : "required"
}
});


$('#submitRequest').click(function(){
   $.ajax({
       type: "POST",
       url: "common/ajax_event.php",
       data: formSerialized,
       timeout:3000,
       error:function(){alert('Error');},
       success: function() {alert('It worked!');}
  });

 return false;
});

我尝试更新到 jquery 和 jquery.validation 的最新版本...

任何帮助将不胜感激！谢谢。

更新

//The validation is working, but I can't even get the alert to show....
$('#form_scheduleEvent').validate({
 rules: {
   name : {required: true, maxlength: 45}, 
   address : {required: true, maxlength: 45},
   phone : "required",
   submitHandler: function(){
     alert('test');
   }
 }
});

Answer 1

我同意乔什·里巴科夫的观点
请参阅以下错误： https://github.com/jzaefferer/jquery-validation/issues/ 1212

Answer 2

$('#form_scheduleEvent').validate({
 rules: {
   name : {required: true, maxlength: 45}, 
   address : {required: true, maxlength: 45},
   phone : "required"
   },
   submitHandler: function(){
     alert('test');
   }

});

提交处理程序应该超出规则。 :-)

Answer 3

您应该将 AJAX 提交调用移至由验证插件中的提交回调触发：

$('#form_scheduleEvent').validate({
rules: {
    name : {required: true, maxlength: 45},
    address : {required: true, maxlength: 45},
    phone : "required",
    submitHandler: function(form) { DoSubmit(); }
}
});


function DoSubmit(){
   $.ajax({
       type: "POST",
       url: "common/ajax_event.php",
       data: formSerialized,
       timeout:3000,
       error:function(){alert('Error');},
       success: function() {alert('It worked!');}
  }

Answer 4

感谢大家的回复。

我最终将原始代码的 ajax 调用部分包装在以下代码中：

if($('#form_scheduleEvent').valid() == true){
  //Process ajax request...
}
return false;

Answer 5

如果您放置的规则没有匹配方法，则可能会发生这种情况，请参阅&为我的错误报告投票。 https://github.com/jzaefferer/jquery-validation/issues/1212

Answer 6

您在验证检查之外调用表单提交。你可能会想要这样的东西：

$('#form_scheduleEvent').validate({
rules: {
    name : {required: true, maxlength: 45},
    address : {required: true, maxlength: 45},
    phone : "required",
    success: function() {
      $.ajax({
        type: "POST",
        url: "common/ajax_event.php",
        data: formSerialized,
        timeout:3000
      }
    }
});

Answer 7

正如 Grillz 所说，您要分别提交和验证，您应该在点击事件中明确调用验证来执行它。

或者反之亦然，正如帕迪所展示的那样！ ;)