使用 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/

【问题讨论】：

标签： javascript jquery html forms

【解决方案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;}
)

【讨论】：