Länge der Benutzerbestätigung jQuery

Question

Ich versuche ein jQuery-Formular zu erstellen, das bei jedem Klicken des Benutzers automatisch aktualisiert wird.

Im Moment arbeite ich an der Abfrage, ob der Benutzername die richtige Länge hat; Ist dies nicht der Fall, wird das Eingabefeld rot dargestellt.

Dies ist mein aktueller Code (der anscheinend überhaupt nicht funktioniert).

jQuery:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
<script type="text/javascript"> 
    jQuery(function($) { 
     $(document).click(function(e) { 
      if (!$(e.target).closest('#jq-user-getval').length) { 
       if ($('#jq-user-getval').val() != '') { 
        if($("#jq-user-getval").val() < 4) { 
         $("#jq-user-getval").addClass('border-force'); 
        } 
       } 
      } 
     }) 
    }) 
</script> 

wie Sie sehen können, ich habe es gemacht, so dass, wenn der Benutzer aus dem Eingabefeld klickt weg, wird prüfen, ob die Box leer ist. Wenn es leer ist, prüft es, ob die Länge weniger als 4 Zeichen beträgt. Dann soll es eine Klasse hinzufügen, die den roten Umriss erzwingt. Dies funktioniert jedoch nicht.

dies ist der HTML, ich bin nicht sicher, ob das Problem hier ist oder nicht liegt:

<form action="" method="post"> 
    <input id="jq-user-getval jq-user-class" type="text" name="username"> 
</form> 

Ich versuche, Microsofts „Hotmail“ Anmeldeformular zu replizieren, wenn Sie Änderungen vorschlagen kann.

Answer 1

Ihr id Wert ist falsch. Technisch kann id keine Leerzeichen enthalten. Ändern Sie Ihre <input /> zu:

<input id="jq-user-getval" class="jq-user-class" type="text" name="username" /> 

Die Art und Weise Sie .val() < 4 verwenden, ist auch falsch.

"hello" < 4;   // This is meaningless. 
"hello".length < 4; // You should use this. 

Verwenden .blur() Funktion dafür:: Sie können nicht mit einem String wie das Vergleichen

$(function() { 
    $("#jq-user-getval").blur(function() { 
    if (this.value.trim().length !== 0 && this.value.trim().length < 4) 
     $(this).addClass("border-force"); 
    }); 
}); 

Wenn Sie dynamisch die <input /> laden, dann können Sie das Ereignis auf diese Weise delegieren:

$(function() { 
    $(document).on("blur", "#jq-user-getval", function() { 
    if (this.value.trim().length !== 0 && this.value.trim().length < 4) 
     $(this).addClass("border-force"); 
    }); 
}); 

Ich habe hinzugefügt .trim() für zusätzliche Sicherheit, wie die Leute könnten wegräumen Räume.

Es gibt keinen wirklichen Grund für Sie, die .click() Funktion irgendwo hier zu verwenden. Das Klicken entfernt wirklich blur Ereignis auf der <input />.

Answer 2

Sie können Jquery Validation verwenden.

Basic-Beispiel:

<input id="username" name="username" maxlength="4" type="text" required> 

$("#yourFormID).validate(); 

, wenn der Eingang nicht gültig ist, und dann AddClass Sie rot umrandet

Sie müssen errorPlacement, Errorclass Eigenschaften in validate() Funktion verwenden