使用 jQuery 检查所有表单输入是不是为空

Posted 2023-05-09

【中文标题】使用 jQuery 检查所有表单输入是不是为空

【英文标题】：Checking if ALL form inputs are empty with jQuery使用 jQuery 检查所有表单输入是否为空

【发布时间】：2012-05-18 00:58:34

【问题描述】：

我正在尝试验证联系表单，并且我想在填写完每个输入字段后创建某种“表单已完成”消息（一些输入是文本框，一些是单选按钮）。

到目前为止，这是我的代码：

$(document).ready(function() 
  $('.form:input').each(function() 
    if ($(this).val() != "") 
      $('.congrats').css("display", "block");
    
  );
);

p.congrats 
  display: none;

<div class="form">
  <input type="text" />
  <br />
  <input type="text" />
</div>
<p class="congrats">Congrats!</p>

http://jsfiddle.net/7huEr/

【参考方案1】：

这应该让你开始：

$(document).ready(function() 
    $(".form > :input").keyup(function() 
        var $emptyFields = $('.form :input').filter(function() 
            return $.trim(this.value) === "";
        );

        if (!$emptyFields.length) 
            console.log("form has been filled");
        
    );
);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form">
    <input type="text" /><br />
    <input type="text" />
</div>
<p class="congrats"></p>

【讨论】：

在每个 keyup 事件上执行$('.form :input') 并不是最优的。我肯定会缓存那个 jQuery 对象：var $fields = $( ':input', '.form' );

@ŠimeVidas - 是的，我虽然有人会指出这一点。好的，我会解决的:)

当然，$(document).ready(fn); 是历史。我们现在正在做$(fn);。

@ŠimeVidas - 也是如此，但我仍然喜欢稍微冗长和老式的版本。

如果浏览器缓存并预填充表单上的值，这会起作用吗？它正在寻找keyup...

【参考方案2】：

试试这个：

$("#a").on('click',function () 
var bad=0;
 $('.form :text').each(function() 
        if( $.trim($(this).val()) == "" ) bad++; 
            
          
    );
    
    if (bad>0) $('.congrats').css("display","block").text(bad+' missing'); 
    else $('.congrats').hide(); 
);



 
   
 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form">
    <input type="text" /><br />
    <input type="text" />
</div>
<p class="congrats"></p><input style="width:100px" value="check" id="a" type="button" />

【参考方案3】：

这个使用了jQuery的serializeArray函数，所以你不必担心检查不同类型的字段或者什么是空字段：

$.fn.isBlank = function() 
    var fields = $(this).serializeArray();

    for (var i = 0; i < fields.length; i++) 
        if (fields[i].value) 
            return false;
        
    

    return true;
;

【讨论】：

为了让它工作，我需要使用 if (fields[i].value != '')

【参考方案4】：

$('#check').click(function () 
    var allFilled = true;
    
    $(':input:not(:button)').each(function(index, element) 
        if (element.value === '') 
            allFilled = false;
        
    );
    
    console.log(allFilled);
);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form">
    <input type="text" /><br />
    <input type="text" />
</div>
<p class="congrats"></p>
<input type="button" id="check" value="check" />

【参考方案5】：

jsFiddle：http://jsfiddle.net/7huEr/38/

$(document).ready( function()

    // Iterate over each input element in the div
    $('.form input').each(function()
    
        // Add event for when the input looses focus ( ie: was updated )
        $(this).blur( function()
        
            // Variable if all inputs are valid
            var complete = true;

            // Iterate over each input element in div again
            $('.form input').each(function()
            
                // If the input is not valid
                if ( !$(this).val() )
                
                    // Set variable to not valid
                    complete = false;
                
            );

            // If all variables are valid
            if ( complete == true )
            
                // Show said congrats
                $('.congrats').show();
            
        );
    );
);​

【参考方案6】：

现代香草解决方案：

// Returns True if all inputs are not empty
Array.from(document.querySelectorAll('#myform input')).every(
    function(el)return el.value;
)