Bootstrap-Klasse fügt von jquery ohne Plugin

Question

Ich versuche, eine Klasse im Bootstrap-Formular für die Validierung hinzuzufügen. Es ist meine Form

<form id= "regForm" method="post" class="form-horizontal"> 
<div class="form-group has-feedback"> 
<label for="FirstName" class="col-sm-2 control-label">First Name</label> 
<div class="col-sm-10"> 
<input type="text" name="firstName" class="form-control" id="FirstName" placeholder="First Name"> 
<span class="glyphicon form-control-feedback" aria-hidden="true"></span> 
</div> 
</div> 
</form> 

und hier ist meine Jquery

$(document).ready(function() { 
$("#FirstName").focusin(function(){ 
var is_name = $("input").val(); 
if(is_name ==='' && is_name === null){ 
$('div').addClass('has-error'); 
$('span').addClass('glyphicon-remove'); 
} 
}); 
}); 

Ich mag, dass, wenn der Name null oder leer ist, sollte es Bootstrap Klasse glyphicon entfernende in bestehenden Klasse hinzufügen, genau in gleicher Weise Ich möchte es in weiteren Formeingaben tun. kann jemand bitte helfen, ich möchte nicht jquery plugin verwenden, ich will es lernen. Ich benutze bootstrap 3.3.7 cdn.

Danke

Answer 1

Dies wird es tun.

$(document).ready(function() { 
    $("#FirstName").focusin(function(){ 
    var is_name = $("input").val(); 
    if(is_name ==='' || is_name === null){ 
     var $this = $(this); 
     $this.addClass('has-error'); 
     $this.next('span').addClass('glyphicon-remove'); 
    } 
    }); 
}); 

Sie hatten den bedingten Operator falsch. Dies:

if(is_name ==='' && is_name === null) 

benötigt, um diese sein: ‚is_name‘

if(is_name ==='' || is_name === null) 

Becuase können beide nie zur gleichen Zeit eine leere Zeichenfolge und null sein, sind sie zwei verschiedene Dinge.

Als nächstes, wo Sie diese Linie hatte:

$('div').addClass('has-error'); 

Sie sagen jQuery die hinzuzufügen ‚has-Fehler‘ Klasse JEDES div auf der Seite.

Stattdessen können Sie einen Verweis auf die Eingabe, die Sie gerade geklickt haben, mit $ (this) erhalten, so dass Sie die Klasse jetzt der Eingabe selbst hinzufügen können.

Sie könnten nur verwenden:

$(this).addClass('has-error'); 

Aber weil Sie die ‚Spanne‘ Tag finden müssen, müssen Sie noch den Hinweis auf den Eingang, so eine bewährte Methode ist es zwischenzuspeichern diese Zeile mit:

Jetzt hat jQuery eine gespeicherte Variable für die Eingabe, die für die Leistung besser ist.

Schließlich verwenden jQuery 'next' Methode, um den span-Tag zu finden und fügen Sie die 'glyphicon-entfernen' Klasse, um es:

$this.next('span').addClass('glyphicon-remove'); 

Hoffnung, das hilft.