2012-04-24 139 views
0

我有一些輸入在頁面上,需要強制至少5個項目已被填充。如果不是,則顯示一條消息,說您必須至少填寫5.到目前爲止,我嘗試了以下方法,但它只是一遍又一遍地顯示錯誤。這樣做的正確方法是什麼?jQuery檢查至少有5個輸入中有數據

$('div.inputs input').each(function(i) { 
    $input = $(this); 
    while (i < 5) { 
     if ($($input).val() == '') { 
      alert('must fill at least 5 items!'); 
     } 
    } 
});​ 
+0

可能的重複[檢測是否至少有一個輸入(作爲數組)填充jQuery](http://stackoverflow.com/questions/5908199/detecting-if-at-least-one-input-as-array -is-filled-in-jquery) – 2012-04-24 08:59:20

+0

太令人沮喪了!它不是重複的,因爲它具有相似的上下文或預期結果。問題是我正在尋求解決**我的問題**與**我的代碼**所以因此其他問題的答案是不相關的,除非我只想獲得快速勝利而不是我的問題的答案。 – Cameron 2012-04-24 09:04:17

+0

您的問題太本地化了,因爲我不認爲其他人會擁有和您一樣的代碼。如果你特別詢問了*代碼的錯誤,那麼你可能會有所不同,但是你問了*這樣做的正確方法*,之前已經回答了。 – 2012-04-24 09:18:41

回答

2

您可以創建一個更好的選擇,然後:

if ($('div.inputs input[value!=""]').length < 5) { 
    alert('must fill at least 5 items!'); 
} 

說明:

div.inputs input[value!=""]選擇選擇具有在 value屬性的東西全部輸入字段,然後你可以獲取所選項目的長度。

以前的解決方案的工作(在某種程度上),但我建議一個更好的:在KARASZI伊什特萬的回答顯示

if ($('div.inputs input').filter(function() { return $(this).val().length > 0; }).length < 5) { 
    alert('must fill at least 5 items!'); 
} 
+0

我很驚訝,這工作tbh。在輸入中輸入值不會改變它們的'value'屬性。看來jQuery正在檢查元素的屬性,而不是屬性。這是不好的,因爲反過來(選擇具有空值'$('input [value =「」]')'),jQuery(或Sizzle)的元素似乎使用內部的'querySelectorAll'方法,該方法不起作用這樣:http://jsfiddle.net/pQmRC/ – 2012-04-24 09:12:00

+0

是的,自從我發佈以來,我一直在徘徊:) – 2012-04-24 09:12:36

+0

嗯...似乎比我想象的更混亂。 $(「input」)。not('[value =「」]')(使用內部方法)與'$('input [value!=「」]')相同''我認爲,最後,使用'.filter()';) – 2012-04-24 09:17:06

2

的方法是整潔,但據解釋什麼是你的代碼錯誤,並你會如何解決這個問題,(主)問題是while條件:

while(i<5) 

...正在評估一個變量,i,即不是由循環的內容改變。在.each()循環的第一次迭代中,i爲0因此while條件爲真並且保持爲真因此您會得到一個無限循環。

爲了讓你的代碼和循環的總體結構,通過各輸入測試值,你可以做這樣的事情:

var filled = 0; 

$('div.inputs input').each(function (i) { 
    if (this.value != '') { 
     filled++; 
     if (filled === 5) 
      return false; 
    } 
}); 

if (filled < 5) { 
    alert('must fill at least 5 items!'); 
} 

也就是說,對於每一個不爲空的增量計數器輸入,然後循環後檢查計數器。請注意,從.each()回撥函數中返回false將立即停止.each()循環;一旦我們達到最低5個非空值,就不需要繼續計數。

+1

+1是一個謙虛的人...! – gdoron 2012-04-24 09:44:03

相關問題