使用jQuery检查输入是否为空

我有一个表单,我希望填写所有的字段。如果一个字段被点击,然后没有填写,我想显示一个红色的背景。

这是我的代码:

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

它将应用警告类,而不管字段是否被填充。

我究竟做错了什么?

     $('#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')抓取多个元素,指定一个上下文,或者如果你只想引用一个单独的元素(假设上下文中有一个文本域)。

    每个人都有正确的想法,但是我喜欢更加明确一些,修改价值观。

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

    如果不使用.length,那么输入'0'可以被标记为坏,并且如果没有$ .trim,5个空格的输入可以被标记为ok。 好运。

    在模糊上做的太有限了。 它假定有关于表单域的重点,所以我更愿意在提交时做,并通过输入映射。 经过多年处理模糊,焦点等技巧,保持简单的事情将产生更多的可用性。

     $('#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.. }); 
     if ($('input:text').val().length == 0) { $(this).parents('p').addClass('warning'); } 

    怎么没有人提到

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

    对我来说似乎更像jquery

    你也可以使用..

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

    :empty伪选择器用于查看一个元素是否不包含子元素,您应该检查值:

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

    考虑使用jQuery验证插件 。 对于简单的必需字段可能稍微有点矫枉过正,但它足够成熟,可以处理你甚至还没有想到的边缘情况(在我们碰到它们之前也不会有任何人)。

    你可以使用“required”类来标记必填字段,在$(document).ready()中运行$('form')。validate(),这就够了。

    它甚至还托管在Microsoft CDN上,以便快速交付: http : //www.asp.net/ajaxlibrary/CDN.ashx

    还有一件你可能想要考虑的事情,目前它只能添加警告类,如果它是空的,当表单不是空的时候,如何去除类。

    喜欢这个:

     $('#apply-form input').blur(function() { if( !$(this).val() ) { $(this).parents('p').addClass('warning'); } else if ($(this).val()) { $(this).parents('p').removeClass('warning'); } }); 
     function checkForm() { return $('input[type=text]').filter(function () { return $(this).val().length === 0; }).length; } 

    以下是使用选定输入的键控的一个示例。 它也使用一个修剪,以确保只是一个空白字符序列不会触发truthy响应。 这是一个可用于开始搜索框或与该类型功能相关的示例。

     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 } } 
     $(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上追加ON或OFF

    你可以尝试这样的事情:

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

    它将仅将.blur()事件应用于具有空值的输入。

     <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>// :) 

    使用HTML 5,我们可以使用一个新的功能“必需”,只需将其添加到您想要的标签,如:

    <input type='text' required>

    keyup事件将检测用户是否已经清除了该框(即退格引发事件,但退格不会在IE中引发按键事件)

      $("#inputname").keyup(function() { if (!this.value) { alert('The box is empty'); }});