Quelle est la meilleure approche pour utiliser ajaxform avec la validation jQuery?

Question

J'utilise le plugin jQuery ajaxform pour créer des formulaires HTML ajaxed et que vous souhaitez mettre en œuvre la validation en utilisant le plugin jQuery Validation.

Je ne suis pas sûr de la meilleure façon de l'implémenter.

Cela ne fonctionne pas pour moi-même. J'ai mis en place le formulaire avec form.ajaxform({}) et ensuite mis en place la validation avec form.validate({}). L'événement invalidHandler se déclenche sur le plug-in de validation, mais ajaxform soumet toujours le formulaire.

Comment câbler les deux correctement?

---

Mon code:

_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

Au lieu de .ajaxForm(), utilisez .ajaxSubmit() dans vos submitHandler (qui ne se déclenche sur le succès), comme ceci:

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

De cette façon il ne tente de faire une soumission AJAX que si la validation est réussie le invalidHandler est tiré). Si vous voulez voir un exemple en direct, voici the related validation plugin demo.