bootstrap class добавляет jquery без плагина

Question

Я пытаюсь добавить класс в форму начальной загрузки для проверки. Это моя форма

<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> 

и вот мой 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'); 
} 
}); 
}); 

Я хочу, что если имя пустое или пустой он должен добавить загрузочный класс glyphicon-удалить в существующем классе, точно таким же образом, Я хочу сделать это в дополнительных формах ввода. может кто-то, пожалуйста, помогите, я не хочу использовать плагин jquery, я хочу его изучить. Я использую bootstrap 3.3.7 cdn.

Thanks

Answer 1

Это сделает это.

$(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'); 
    } 
    }); 
}); 

У вас был условный оператор неправильно. Это:

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

Необходимо, чтобы быть таким:

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

Becuase «is_name» никогда не может быть и пустая строка и нуль в то же время, они 2 разные вещи.

Далее, где была эта строка:

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

Вы говорите JQuery добавить класс «имеет ошибок» для КАЖДОГО DIV на этой странице.

Вместо этого вы можете получить ссылку на вход, который вы только что нажали, используя $ (this), поэтому теперь вы можете добавить класс к самому входу.

Вы могли бы просто использовать:

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

Но потому что вам нужно найти «поверочного» тег, вы по-прежнему нужна ссылка на вход, так что лучше практика кэшировать его с помощью этой строки:

var $this = $(this); 

Теперь jQuery имеет сохраненную переменную для ввода, которая лучше для производительности.

Наконец, используйте следующий «» метод JQuery, чтобы найти калибровочный тег и добавьте класс «glyphicon-удалить» к нему:

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

Надежда, что помогает.