Comment puis-je effectuer une validation de formulaire avec jQuery en utilisant des icônes comme indicateurs de réussite/échec?

Question

Comment faire une validation de formulaire avec jQuery pour permettre une coche verte si un champ passe une regex et un x rouge s'il échoue?

Quelqu'un peut-il me diriger vers un exemple de jQuery qui montre une icône immédiatement si un champ valide et un autre s'il échoue?

Answer 1

Il existe plusieurs façons de l'implémenter. En voici un.

Le code HTML correspondant ressemblerait à ceci:

<div><input type="text" id="myInput" /></div> 

Le jQuery serait quelque chose comme ceci:

// probably within your jQuery(document).ready(...) function: 
// bind a change event handler to your input 
jQuery("#myInput").bind("change", function(e) { 

    var $this = jQuery(this); 
    var re = /[a-z]/; // here's your regex 
    var imgSrc = "blank.gif"; 

    if (re.test(jQuery(this).val())){ 
     // this is a successful match - green 
     imgSrc = "green.gif";   
    } else { 
     // this is not a match - red 
     imgSrc = "red.gif"; 
    } 

    // make sure we have an image before our input: 
    if(!$this.prev().is("img")) { $this.before("img"); } 

    // set the image to green 
    $this.prev().attr("src", imgSrc); 
}); 

Edit: bug fix + commentaires

Answer 2

Il est le jQuery Validation plugin qui soutient que genre de chose. Jetez un coup d'oeil au formulaire de démonstration «Souvenez-vous du lait»; il a un retour immédiat. Vous devez configurer l'option "succès" dans la méthode validate() pour faire plus que fournir des commentaires négatifs.

Answer 3

$(document).ready(AddValidation); 

function AddValidation() 
{ 
    $("#frmadminlogin").validate({ 
     'rules':{ 
      'txtadminemail':{'required':true, 'email':true}, 
      'txtadminpass':{'required':true} 
     }, 
     'messages': { 
      'txtadminemail':{'required':'<img title="Please enter login email." src="../images/error.gif" />', 'email':'<img title="Please enter valid email." src="../images/error.gif" />'}, 
      'txtadminpass':{'required':'<img title="Please enter login password." src="../images/error.gif" />'} 
     } 
    }); 
}