Wie kann ich die Formularüberprüfung mit jQuery unter Verwendung von Symbolen als Pass/Fail-Indikatoren durchführen?

Question

Wie kann ich die Formularüberprüfung mit jQuery durchführen, um ein grünes Häkchen zu setzen, wenn ein Feld eine Regex und ein rotes x bei einem Fehler passiert?

Kann mir jemand auf ein Beispiel von einigen jQuery zeigen, die ein Symbol sofort zeigt, wenn ein Feld validiert und ein anderes, wenn es fehlschlägt?

Answer 1

Es gibt eine Vielzahl von Möglichkeiten, dies zu implementieren. Hier ist eine.

Die entsprechende HTML würde wie folgt aussehen:

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

Die jQuery so etwas wie dieses würde:

// 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 + Kommentare

Answer 2

Es gibt die jQuery Validation plugin, die unterstützt, dass irgendwie. Werfen Sie einen Blick auf das Demo-Formular "Remember the Milk". es hat sofortiges Feedback. Sie würden die Option "success" in der validate() -Methode einrichten, um mehr zu tun, als nur eine negative Rückmeldung zu geben.

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" />'} 
     } 
    }); 
}