引導類添加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'); 
} 
}); 
}); 

我想，如果名稱爲null或空應該添加在現有的類引導類glyphicon-刪除，正是在同樣的方式我想以進一步的形式輸入。可以有人請幫助我不想使用jquery插件我想學習它。我正在使用bootstrap 3.3.7 cdn。

謝謝

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) 

監守「is_name」不能既是一個空字符串和空的同時，他們是2米不同的東西。

接下來，你有這條線：

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

你告訴jQuery來了「有錯」類添加到頁面上的每個格。相反，您可以使用$（this）獲得對您剛纔單擊的輸入的引用，所以現在您可以將該類添加到輸入本身。

你可以只使用：

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

但是，因爲你需要找到「跨度」標籤，你仍然需要參考輸入，所以最好的做法是使用此線以高速緩存它：

var $this = $(this); 

現在jQuery有一個保存的輸入變量，這對性能更好。

最後，使用jQuery的「下一個」法找到span標籤和「glyphicon - 刪除」類添加到它：

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

希望有所幫助。