parsley.js - 只需要一组欧芹字段中的一个

Question

我正在使用 Parsley.js用于验证项目的表单提交。我的需求之一是让 Parsley 要求三个字段中至少有一个包含数据，并且只有在三个字段都没有数据时才会失败验证。

我从文档中不确定如何完成此操作。我已经对表单的其余部分进行了 Parsley 验证。

Answer 1

你可以像这样使用自定义验证器来做到这一点

var CheckReccursion = 0;
    window.Parsley.addValidator('min3', {
        validateString: function (value, requirement, instance) {
            var notice =$('#notice').html(' ');

            var group = $(requirement);//a class

            var FieldsEmpty = 0;
            var FieldsNotEmpty = 0;
            var count = 0

            group.each(function () {

                var _val = $(this).val()
                var length = _val.length

                if (length > 0) {
                    FieldsNotEmpty++;
                }
                else {
                    FieldsEmpty++;
                }
                count++;
            })

            var isValid = (FieldsNotEmpty >=1)
            //recursively execute
            group.each(function (index) {
                if (CheckReccursion === index) {
                    CheckReccursion++;
                    $(this).parsley().validate();
                    CheckReccursion = 0;
                }
            })
            return isValid;
        }
    });

$(function () {
    var ok=false;
    var notice =$('#notice');

    $('#form1').parsley().on('form:validated', function(formInstance) {
        ok = formInstance.isValid({force: true});
    })
    .on('form:submit', function() {
        if(!ok){
            notice.html('Please fill at least 1 field');
            return false;
        }
        else{
            notice.html('okay');
            return false;//change to true to submit form here

        }
    });
});

然后将欧芹属性添加到字段组中，如下所示:

<form id="form1" data-parsley-validate="true">
    <input type="text" name="field1"

    data-parsley-min3 = ".group1"
    data-parsley-min3-message = "At least 1 must be filled"
    class="group1">



    <input type="text" name="field2"

    data-parsley-min3 = ".group1"
    data-parsley-min3-message = "At least 1 must be filled"
    class="group1">

    <input type="text" name="field3"

    data-parsley-min3 = ".group1"
    data-parsley-min3-message = "At least 1 must be filled"
    class="group1">



    <span id="notice"></span>
    <input type="submit" value="Submit">

</form>

看看这个 fiddle https://jsfiddle.net/xcoL5Lur/6/