将数据从输入收集到阵列中进行验证

时间:2013-09-04 19:37:09

标签: javascript jquery validation parsley.js

我正在寻找一种方法来遍历一组输入,将每个数据附加到一个数组中,以便我可以检查数组是否为空,从而允许我验证我的一个或多个输入已经填写完毕。 我使用欧芹进行验证,但客户想要一种方法来确保填写这些元素中的至少一个。

目前我将它作为一个巨大的jQuery要求/规则设置。但我觉得它很笨重,我的另一个想法是节省空间和时间。

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

3 个答案:

答案 0 :(得分:0)

这不适合验证插件,但这是一个简单的解决方案:

http://jsfiddle.net/yKRdh/

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

答案 1 :(得分:0)

我不熟悉欧芹,但这个jQuery会告诉你是否至少填写了一个输入:

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

也许您可以在表单级规则中使用上述函数。

答案 2 :(得分:0)

结束这样做(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>