javascript - 使用 jQuery 检查所有表单输入是否为空

Question

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

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

$(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/

Answer 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>

Answer 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" />

Answer 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;
};

Answer 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" />

Answer 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();
            }
        });
    });
});​

Answer 6

现代香草解决方案：

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