使用 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;}
)