将输入中的数据收集到数组中以进行验证

Question

I am looking for a way to loop through a group of inputs, appending the data from each into an array so that I might check to see if the array is empty, thus allowing me to validate if one or more of my inputs has been filled out. I am using parsley for my validation, but the customer wants a way to ensure that AT LEAST ONE of these elements is filled out.

Currently I have it working as a giant jQuery requirement/rules setup. But I feel it is clunky and my other idea would save space and time.

My 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

This doesn't fit with the validation plugin, but here's a simple solution:

http://jsfiddle.net/yKRdh/

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

Answer 2

I'm not familiar with parsley, but this jQuery will tell you if you have at least one input filled out or not:

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

Maybe you could use the above function in a form-level rule.

Answer 3

Ended up doing this ( 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>