在jQuery验证中使用ajaxform的最佳方法是什么？

Question

我正在使用ajaxform jQuery插件用于创建ajaxed HTML表单并希望使用jQuery实现验证Validation插件。

我不知道什么是最好的方式来实现这一点。

它对我来说不起作用。我使用form.ajaxform({})设置了表单，然后使用form.validate({})设置了验证。 invalidHandler事件触发验证插件，但ajaxform仍提交表单。

如何正确连接两者？

---

我的代码：

_initializeValidation: function (form) { 

    var options = { 
     rules: 
      { 
       Name: 
       { 
        required: true 
       } 
      }, 
     messages: 
      { 
       Name: "Name is required", 
       ShortName: "Short name is required" 
      } 
    }; 

    if (form.find("#ShortName").length == 1) 
     $.extend(options.rules, { ShortName: { required: true} }); 

    form.validate(options); 
} 

/* 
* Initializes a newly loaded edit form 
*/ 
_initializeEdit: function (panel) { 
    var thisDetailTab = this; 
    var form = panel.find("form"); 
    form.ajaxForm(
     { 
      target: panel, 
      url: this._config.updateUrl, 
      beforeSubmit: function (arr, $form, options) { 
       return form.valid(); 
      }, 
      success: function (responseText, statusText, xhr, form) { 
       thisDetailTab._initializeDetails(panel); 
       thisDetailTab._config.refreshSummary(); 
      } 
     } 
    ); 

    this._initializeValidation(form); 

    var cancelButton = panel.find(".cancelButton"); 
    cancelButton.click(function (event) { 
     $.ajax(
      { 
       url: thisDetailTab._config.detailsUrl, 
       success: function (data) { 
        panel.empty(); 
        panel.append(data); 
        thisDetailTab._initializeDetails(panel); 
       } 
      } 
     ); 
    }); 
} 

Answer 1

相反的.ajaxForm()，请使用您的submitHandler（只成功火灾）.ajaxSubmit()，就像这样：

$("form").validate({ 
    rules: { ... }, 
    submitHandler: function(form) { 
    $(form).ajaxSubmit({ ...options... }); 
    } 
}); 

这样它只会在验证成功时尝试进行AJAX提交（其他） rwise invalidHandler被解雇）。如果你想看一个生动的例子，这里是the related validation plugin demo。