jQuery Validation Plugin - Dès que le formulaire est valide

Question sur jQuery Valider. Quand mon formulaire se charge, j'ai le bouton de soumission à 50% d'opacité pour faire savoir à l'utilisateur qu'il est désactivé.jQuery Validation Plugin - Dès que le formulaire est valide

Dès que le formulaire répond à toutes les règles, onkeyup, comment puis-je détecter cela et me permettre de retourner l'opacité des boutons de soumission à 100%. Le "success: function (label) {" est trop tard, car l'utilisateur doit passer au champ suivant, ce qui n'est pas le cas dans mon application.

Des idées?

Source

2010-11-02 TheExit

-1

Je fais ceci d'une autre manière. Vous avez une validation de formulaire sur le serveur, c'est sûr? Et pourquoi valider deux fois les données de formulaire? Dans le client et sur le serveur.

Ma solution est d'envoyer un formulaire avec ajax to server, de valider ici, et si ce n'est pas une erreur - sauvegarder des données (ou quelque chose ...). Si le validateur du serveur trouve des erreurs, le formulaire est renvoyé (sur json ...) et les erreurs sont affichées sur le client.

Aidez-nous ça? Martin

Source

2010-11-02 21:20:58 Dingo

C'est une mauvaise expérience utilisateur. – TheExit

Quand vous pouvez difficilement valider (c'est un e-mail en db, ...), le seul moyen est d'envoyer des données au serveur et de les valider ici. Pourquoi une mauvaise expérience? – Dingo

Vous pouvez facilement détourner les rappels du mécanisme de validation en utilisant le validate method options. Voici un exemple (également mis sur jsbin):

<html> 
<head> 
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.3.min.js"></script> 
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery.validate/1.7/jquery.validate.min.js"></script> 
</head> 
<body> 
<script> 
$(function() { 
    var button = $('#submit1'); 
    function buttonHandler(validator) { 
     var errors = validator.numberOfInvalids(); 
     if(errors === 0) { 
      button.removeAttr('disabled'); 
     } else { 
      button.attr('disabled', 'disabled'); 
     } 
    } 

    $('#form1').validate({ 
     rules: { 
      text1: { required: true } 
     }, 
     errorPlacement: function (error, element) { 
      error.insertAfter(element); 
      buttonHandler(this); 
     }, 
     highlight: function (element, errorClass, validClass) { 
      $(element).addClass(errorClass); 
      $(element).removeClass(validClass); 
      buttonHandler(this);   
     }, 
     unhighlight: function (element, errorClass, validClass) { 
      $(element).addClass(validClass); 
      $(element).removeClass(errorClass); 
      buttonHandler(this); 
     } 
    }).form(); // trigger validation 
}); 
</script> 
    <form id="form1" action="#"> 
     <input id="text1" name="text1" type="text" /><br/> 
     <input id="submit1" name="submit1" type="submit" value="Test" disabled="disabled" /> 
    </form> 
</body> 
</html>

La clé est de déclencher la validation ici avant toute intervention de l'utilisateur (en utilisant la méthode validator.form()), donc jquery.validate commence à écouter les événements d'entrée, et commence à déclencher les rappels lorsque les événements de touche (et autres) se déclenchent.

Source

2010-11-02 21:41:22 m0sa

merci, mais c'est beaucoup de code. Je ne peux pas comprendre ce que les ajouts et ce qui ne l'est pas? – TheExit

Mettez en surbrillance et surlignez une partie de valider? – TheExit

errorPlacement, highlight et unhighlight sont des options pour la méthode validate, et sont appelés lorsque le validateur affiche/cache/affiche des messages d'erreur après la validation. L'exemple injecte un gestionnaire personnalisé (buttonHandler) qui gère l'attribut disabled du bouton submit en fonction de l'état du validateur. – m0sa

jQuery Validation Plugin - Dès que le formulaire est valide

Répondre

Questions connexes