Comment effectuer une validation côté serveur avant de soumettre

Question

Le formulaire contient un élément d'entrée. La valeur entrée est validée à l'aide du rappel du serveur à partir du flou événement andler.

Si une valeur incorrecte est entrée et que le bouton d'envoi est enfoncé, le formulaire est soumis avec une valeur incorrecte: La méthode de validation n'est pas terminée mais la méthode d'action d'envoi de formulaire est exécutée.

Comment forcer la méthode Validate() pour être terminée avant l'exécution de la méthode de soumission de formulaire?

jquery, jqueryUI, ASP .NET MVC2 sont utilisés.

<form id="Form" class='form-fields' method='post' action='/Report/Render'> 
    <input id='test' name='test' value='test' /> 
    <input id='_submit' type='submit' value='Show report' /> 
</form> 

    $('#test').bind({ 
     blur: function (e) { 
      if (!Validate(e.target)) { 
       cancel(e); 
      } 
     } 
    }); 

Mise à jour

Comme nécessaire commentaire BobTodd ici est de valider la méthode:

function Validate(elem) { 
var i, 
    res; 
$.ajax('Grid/Validate'); 
    { 
     data: $("#Form").serializeArray(), 
     //async: false, 
     type: 'POST', 
     error: function (jqXHR, textStatus, errorThrown) { 
      elem.skipBlur = true; 
      errorMessage(decodeErrorMessage(jqXHR.responseText === undefined ? '' : jqXHR.responseText, 
         textStatus, errorThrown)); 
      elem.focus(); 
      elem.select(); 
      elem.skipBlur = false; 
      elem.ischanged = true; 
      res = false; 
     }, 
     success: function (data) { 
      elem.ischanged = false; 
      for (i = 0; i < data.length; i += 1) { 
       $('#' + data[i].name).val(data[i].value); 
      } 
      res = true; 
     } 
    }); 
return false; // res; 

}

Update2

Al Les réponses suggèrent d'empêcher l'exécution de la méthode submit si la validation n'est pas effectuée. Cela donne une très mauvaise expérience utilisateur: valider prend du temps. L'utilisateur doit appuyer sur deux fois dans le bouton Envoyer pour que le formulaire soit envoyé. Comment permettre au formulaire de soumettre en utilisant un seul clic? Maksing Valider() méthode de synchronisation alllws cela mais je ne suis pas sûr utilise l'appel de synchronisation solution raisonnable pour cela.

Answer 1

Vous devrez réexécuter la méthode Validate sur le formulaire submit et l'annuler là.

Regardez le plugin jQuery Validate, il supporte les méthodes de validation remove qui fonctionnent super facilement avec mvc.

http://bassistance.de/jquery-plugins/jquery-plugin-validation/

http://docs.jquery.com/Plugins/Validation/Methods/remote#options

Answer 2

suffit de désactiver le bouton d'envoi jusqu'à ce que la validation est terminée.

Answer 3

Wouldnt vous mieux servi de liaison qui jquery à l'événement de présenter le formulaire au lieu autrement son juste au moment où l'utilisateur quitte la zone de texte ...

$('.form-fields').bind({ 
     submit: function (e) { 
      if (!Validate(e.target)) { 
       cancel(e); 
      } 
     } 
    }); 

Answer 4

Lorsque vous validez un champ, ajoutez une classe à valid l'élément si c'est valide. Ensuite, lors de la soumission du formulaire, vérifiez simplement si tous les champs ont cette classe:

$('#Form').submit(funciton(e){ 
    $(this).find('input').length == $(this).find('input.valid').length || e.preventDefault(); 
}); 
$('#Form input').bind({ 
    blur: function (e) { 
     if(Validate(e.target)) 
      $(e.target).addClass('valid'); 
     else 
      $(e.target).removeClass('valid'); 
    } 
});