將輸入中的數據收集到數組中以進行驗證

Question

我正在尋找一種遍歷一組輸入的方法，將每個輸入的數據追加到數組中，以便檢查數組是否為空，從而使我可以驗證是否已填充一個或多個輸入出來。 我正在使用香菜進行驗證，但是客戶希望找到一種方法來確保至少填寫這些元素。

目前，我將其作為巨型jQuery需求/規則設置進行工作。 但是我覺得這很笨拙，我的其他想法可以節省空間和時間。

我的jsfiddle

// validate form    
$("#signupform").validate({
    rules: {
        telephone: {
            required: function (element) {
                if (($("#mobile").val().length > 0) || ($("#olb").val().length > 0) || ($("#ach").val().length > 0)|| ($("#internet").val().length > 0) || ($("#paper").val().length > 0) ) {
                    return false;
                } else {
                    return true;
                }
            }
        },
        mobile: {
            required: function (element) {
                if (($("#telephone").val().length > 0) || ($("#olb").val().length > 0) || ($("#ach").val().length > 0)|| ($("#internet").val().length > 0) || ($("#paper").val().length > 0) ) {
                    return false;
                } else {
                    return true;
                }

            }
        },
        olb: {
            required: function (element) {
                if (($("#telephone").val().length > 0) || ($("#mobile").val().length > 0) || ($("#ach").val().length > 0)|| ($("#internet").val().length > 0) || ($("#paper").val().length > 0) ) {
                    return false;
                } else {
                    return true;
                }
            }
        },
        ach: {
            required: function(element) {
                if (($("#telephone").val().length > 0) || ($("#olb").val().length > 0) || ($("#mobile").val().length > 0)|| ($("#internet").val().length > 0) || ($("#paper").val().length > 0) ) {
                    return false;
                } else {
                    return true;
                }
            }
        },
        internet: {
            required: function(element) {
                if (($("#telephone").val().length > 0) || ($("#olb").val().length > 0) || ($("#ach").val().length > 0)|| ($("#mobile").val().length > 0) || ($("#paper").val().length > 0) ) {
                    return false;
                } else {
                    return true;
                }
            }
        },
        paper: {
            required: function(element) {
                if (($("#telephone").val().length > 0) || ($("#olb").val().length > 0) || ($("#ach").val().length > 0)|| ($("#internet").val().length > 0) || ($("#mobile").val().length > 0) ) {
                    return false;
                } else {
                    return true;
                }
            }
        }
    }
});

Answer 1

這與驗證插件不匹配，但這是一個簡單的解決方案：

http://jsfiddle.net/yKRdh/

var atLeastOneFilled = $('input:not([type="submit"]').filter(function () {
    return $.trim(this.value) !== '';
}).length > 0;

Answer 2

我對歐芹不熟悉，但是此jQuery會告訴您是否填寫了至少一個輸入：

var atLeastOneFilledOut = $(':input')
    .filter(function() {
        var val = $(this).val();
        return val != "" && val != 0;
    }).length;

也許您可以在表單級規則中使用上述功能。

Answer 3

最終做到了這一點（ jsfiddle ）：

<form id="signupform">
    <select id="masterSelect">
        <option value="">nuttin</option>
        <option value="stuff">asdfasdf</option>
    </select>
    <div class="required-group">
        <input id="telephone" name="telephone" />
        <br/>
        <input id="mobile" name="mobile" />
        <br/>
        <input id="ach" name="ach" />
        <br />
        <input id="internet" name="internet" />
        <br />
        <input id="paper" name="paper" />
    </div>
    <button id="submit" type="submit">Submit</button>
</form>
<script>
$('#masterSelect').on('change', function () {
    if (this.value == "stuff") {
        $('#submit').attr("disabled", "disabled");
    } else {
        $('#submit').removeAttr("disabled");
    }
});
$('.required-group input').on('change', function () {
    var atLeastOneFilled = false;
    atLeastOneFilled = $(this).filter(function () {
        return $.trim(this.value) !== '';
    }).length > 0;

    if (atLeastOneFilled == true) {
        $('#submit').removeAttr("disabled");
    }
    else {
        $('#submit').attr("disabled", "disabled");
    }
});
</script>