檢查多個必填字段是否為空

Question

因此，在嘗試將表單提交給AJAX之前，我嘗試使用屬性“ required”來驗證HTML輸入，並且我無法在沒有每個字段都具有唯一ID的情況下終生解決該問題（這不是可能，因為我真的希望能夠僅將“ required”添加到字段並重用代碼，而不必在其中添加多個ID）。

這是我的HTML的摘要，因此您可以看到我正在選擇的內容：

    <div class="control-group">

        <label class="control-label"><span class="req">*</span> Contact Name:</label>
        <div class="controls">

            <input class="input-block-level" type="text" name="contactTitle" value="{$widget.options.contactTitle}" placeholder="Marty McFly" required />

        </div>
    </div>

這是jQuery：

    function configureSubmit() {

        var reqInput = "input[required]"

        if( $( reqInput ) ) {

            $( reqInput ).each(function() {

                if( !$(this).val() ){

                    $('input[required]').addClass('falseVal');

                } else {

                    $('input[required]').removeClass('falseVal');

                }

            });
        }

        if ( $(reqInput).hasClass('falseVal') ) {

            alert("Please fill in all required fields.");
            $('input[required]').css('border', '1px solid red');

        } else {

            $.ajax({

                type: 'POST',
                url: $("#options-form").attr('action'),
                data: $("#options-form").serialize(),
                success: function(data) {

                    if (data=='1') {

                        if ($.inArray(configureId,staged_widgets)<0) {
                            staged_widgets.push(configureId);

                        }

                        $("#configure").modal('hide');
                        $("#widget-"+configureId).removeClass('new-widget');
                        updateWidget(configureId);  

                    }

                }

            });

        }

和提交按鈕：

    <input type="submit" class="btn btn-primary" onclick="configureSubmit(); return false;" Value="Update" />

如您所見，如果該字段為空，則添加一個類，如果該字段已填寫，則刪除一個類。 然后，我檢查此類，如果不存在，則提交。

這里的問題是，如果我不使用.each（）選擇器，並且我有多個必填字段，則第一個字段填寫完畢后，它將提交給AJAX。 如果我確實使用.each（）選擇器，則它對於所有字段為空（除了最后一個字段）都可以正常工作。 如果填寫了最后一個字段，它將提交給AJAX，因為該函數將從所有必填字段中刪除“ falseVal”類。

必須有一個更好的方法來做到這一點！ 有任何想法嗎？

Answer 1

我更喜歡先獲取無效元素的集合....然后，如果該集合具有長度，則不要繼續。

這行：

if( $( reqInput ) ) {

即使不存在也將始終為true，因為無論是否找到選擇器匹配項並且if({})為true，它都會創建一個jQuery對象

---

使用filter()可以獲取無效對象的集合

var $required = $( "input[required]").removeClass('falseVal'),
    $invalid = $required.filter(function(){  
         return !this.value; // only want elements with no value
    }).addClass('falseVal');

if($invalid.length){
    alert('not all fields filled');
}else{
   $.ajax({/* options */});
}