使用jQuery檢查輸入是否爲空

Question

我有一個表單，我希望填寫所有字段。如果一個字段被點擊進入然後沒有填寫，我想顯示一個紅色的背景。

這裏是我的代碼：

$('#apply-form input').blur(function() { 
    if ($('input:text').is(":empty")) { 
    $(this).parents('p').addClass('warning'); 
    } 
}); 

不管它的應用領域正在填寫或者不警告類。

我在做什麼錯？

Answer 1

$('#apply-form input').blur(function() 
{ 
    if(!$(this).val()) { 
      $(this).parents('p').addClass('warning'); 
    } 
}); 

而且你不一定需要.length或者看它是否>0因爲一個空字符串的值爲false但無論如何，如果你想爲可讀性目的：

$('#apply-form input').blur(function() 
{ 
    if($(this).val().length === 0) { 
     $(this).parents('p').addClass('warning'); 
    } 
}); 

如果你確保它總是在textfield元素上運行，那麼你可以使用this.value。你

$('#apply-form input').blur(function() 
{ 
     if(!this.value) { 
      $(this).parents('p').addClass('warning'); 
     } 
}); 

同時也應該注意到，$('input:text')抓住多個元素，指定一個上下文或使用this關鍵字，如果你只是想一個孤獨的元素的引用（只要是在上下文的後代/兒童一個文本框）。

Answer 2

if ($('input:text').val().length == 0) { 
     $(this).parents('p').addClass('warning'); 
} 

Answer 3

的:empty僞選擇器可用於查看是否有元素包含沒有孩子的，你應該檢查該值：

$('#apply-form input').blur(function() { 
    if(!this.value) { // zero-length string 
      $(this).parents('p').addClass('warning'); 
    } 
}); 

Answer 4

考慮使用the jQuery validation plugin代替。它對於簡單的必需字段可能稍微有點矯枉過正，但它足夠成熟，可以處理你還沒有想到的邊緣情況（在我們碰到它們之前也不會有任何人）。您可以使用「required」類標記必填字段，在$（document）.ready（）中運行$（'form'）。validate（），這就是所需要的。

它甚至託管在微軟CDN也爲交貨快捷：http://www.asp.net/ajaxlibrary/CDN.ashx

Answer 5

每個人都有正確的想法，但我喜歡多一點明確的和修剪的值。

$('#apply-form input').blur(function() { 
    if(!$.trim(this.value).length) { // zero-length string AFTER a trim 
      $(this).parents('p').addClass('warning'); 
    } 
}); 

如果你不使用。長度

，那麼「0」的條目可以得到標記爲壞，和5位的條目可以得到標記爲OK沒有$ .trim。好運。

Answer 6

你可以嘗試這樣的事情：

$('#apply-form input[value!=""]').blur(function() { 
    $(this).parents('p').addClass('warning'); 
}); 

它將適用.blur()活動只爲空值的輸入。

Answer 7

還有一件你可能想要考慮的事情，目前它只能添加警告類，如果它是空的，如何在表單不再空時再次刪除類。

這樣的：

$('#apply-form input').blur(function() 
{ 
    if(!$(this).val()) { 
      $(this).parents('p').addClass('warning'); 
    } else if ($(this).val()) { 
      $(this).parents('p').removeClass('warning'); 
    } 
}); 

Answer 8

做它模糊是太有限了。它假設有關於表單域的重點，所以我更願意在提交時完成它，並通過輸入映射。經過多年的處理花式模糊，焦點等技巧，保持簡單的事情將產生更多的可用性。

$('#signupform').submit(function() { 
    var errors = 0; 
    $("#signupform :input").map(function(){ 
     if(!$(this).val()) { 
       $(this).parents('td').addClass('warning'); 
       errors++; 
     } else if ($(this).val()) { 
       $(this).parents('td').removeClass('warning'); 
     } 
    }); 
    if(errors > 0){ 
     $('#errorwarn').text("All fields are required"); 
     return false; 
    } 
    // do the ajax..  
}); 

Answer 9

<script type="text/javascript"> 
$('input:text, input:password, textarea').blur(function() 
    { 
      var check = $(this).val(); 
      if(check == '') 
      { 
       $(this).parent().addClass('ym-error'); 
      } 
      else 
      { 
       $(this).parent().removeClass('ym-error'); 
      } 
    }); 
</script>// :) 

Answer 10

爲什麼沒有人提到

$(this).filter('[value=]').addClass('warning'); 

似乎更jQuery的喜歡我

Answer 11

隨着HTML 5，我們可以用「需要」的一項新功能只需將其添加到標籤你想要的像：

<input type='text' required>

Answer 12

以下是使用選定輸入的鍵控的示例。它還使用修剪以確保只有空白字符序列不會觸發真實反應。這是一個可用於開始搜索框或與此類功能相關的示例。

YourObjNameSpace.yourJqueryInputElement.keyup(function (e){ 
    if($.trim($(this).val())){ 
     // trimmed value is truthy meaning real characters are entered 
    }else{ 
     // trimmed value is falsey meaning empty input excluding just whitespace characters 
    } 
} 

Answer 13

$(function() { 
    var fields = $('#search_form').serializeArray(); 
    is_blank = true; 
    for (var i = 0; i < fields.length; i++) { 
    // excluded fields 
    if ((fields[i].name != "locale") && (fields[i].name != "utf8")) { 
     if (fields[i].value) { 
     is_blank = false; 
     } 
    } 
    } 
    if (is_blank) { 
    $('#filters-button').append(': OFF'); 
    } 
    else { 
    $('#filters-button').append(': ON'); 
    } 
}); 

檢查所有字段爲空，並附加開或關Filter_button

Answer 14

function checkForm() { 
 
    return $('input[type=text]').filter(function() { 
 
    return $(this).val().length === 0; 
 
    }).length; 
 
}

Answer 15

你也可以使用..

$('#apply-form input').blur(function() 
{ 
    if($(this).val() == '') { 
      $(this).parents('p').addClass('warning'); 
    } 
}); 

，如果你有懷疑的空間，然後嘗試..

$('#apply-form input').blur(function() 
{ 
    if($(this).val().trim() == '') { 
      $(this).parents('p').addClass('warning'); 
    } 
}); 

Answer 16

如果用戶已清除箱以及KeyUp事件將檢測（即backspace引發事件，但退格不會引發IE中的按鍵事件）

$("#inputname").keyup(function() { 

if (!this.value) { 
    alert('The box is empty'); 
}});