Combinaison de MicrosoftMvcJQueryValidation et Ajax Submit

Question

Je rencontre des problèmes pour essayer d'appliquer MS JQuery Validation dans mes formulaires lorsque je souhaite envoyer des données via un appel Ajax. J'utilise DataAnnotations et la bibliothèque MicrosoftMvcJQueryValidation.js pour effectuer la validation côté client et côté serveur.

validation du serveur fonctionne très bien et je suis en train de permettre la validation du client par moyenne de

 <% Html.EnableClientValidation(); %> 
    <%= Html.ValidationSummary("Create was unsuccessful. Please correct the errors and try again.") %> 

    <div id="formContainer"> 
     <% using(Html.BeginForm()){ %> 

      <table class="formTable" width="100%" border="0" cellspacing="0" cellpadding="0"> 

      <tr> 
       <td><label for="Description">Description:</label></td> 
       <td><%= Html.TextBox("Description", Model.Description) %> 
       <%= Html.ValidationMessage("Description", "*") %></td> 
      </tr> 
      <tr> 
       <td> </td> 
       <td> 
       <%=Html.Button("cancelBtn","Cancel")%> 
       <input id='createBtn' class='button' type='button' value='Create' /> 
       </td> 
      </tr> 

      </table> 
     <% } %> 

    </div> 

L'événement onclick est alors géré par un appel Ajax personnalisé. Dans ma source de page je peux voir la section

//<![CDATA[EnableClientValidation(...)] 

mais je voudrais valider les données avant l'appel Ajax réel.

Au contraire à l'aide d'une entrée et soumettre

inputCreate.submit(function() {$.ajax...}); 

validation côté client est effectuée, mais aucun ajax appel est effectuée, le formulaire est soumis par l'intermédiaire postback.

Est-il possible de les faire fonctionner ensemble sans changer la bibliothèque jQuery.validate?

Est-ce possible? Est-ce que j'utilise une mauvaise approche à ce sujet?

Merci à l'avance

Answer 1

Je ne trouve aucune solution comment utiliser MicrosoftMvcJQueryValidation.js pour ajax soumettre le formulaire sans le modifier. Voici ma solution de contournement:

1) ajouter du code folowing dans le fichier "MicrosoftMvcJQueryValidation.js", juste avant "theForm.validate(options);" dans "function __MVC_EnableClientValidation(validationContext) ":

2) utiliser cette fonction js pour ajouter vos propres options pour .validate() méthode:

function setFormValidationOptions(formId, options) { 
    if (typeof (formId) == undefined || formId == null || typeof (options) == undefined || options == null) return; 
    if (window.mvcClientValidationMetadata) { 
     for (i = 0; i < window.mvcClientValidationMetadata.length; i++) 
      if(window.mvcClientValidationMetadata[i].FormId == formId) 
       window.mvcClientValidationMetadata[i].validationOptions = options; 
    } 
} 

3) à soumettre ajax forme d'utilisation:

valOpt = { 
    submitHandler: function(form) { 
     $(form).ajaxSubmit({ 
      target: "#output" 
     }); 
    } 
}; 
setFormValidationOptions("myFormId", valOpt); 

N'oubliez pas que vous pouvez ajouter toute options valide pour la fonction .validate(). Les plugins jquery.validate et jquery.forms doivent être chargés.

Espérons que ça aide.

Answer 2

$("input#createBtn").click(function() { 
    theform = $(this).closest("form"); 
    if (theform.validate().form()) { 
     jQuery(theform).ajaxSubmit({ 
      target: "#formContainer" 
     }); 
    } 
    else { 
     return false; 
    } 
});