validation - 使用 Parsley 添加自定义多重验证

Question

是否可以使用 Parsley 添加自定义多重验证(即依赖于多个输入的单一验证)？

我有时想验证 <form>或整个部分并在该级别而不是在 <input> 提供错误等级。

例如，想象一个带有 <table> 的表单。允许用户输入颜色和尺寸的不同组合。假设我想验证没有重复的组合。最佳方法是每行验证一行并查找其上方的重复行。如果发现重复的行，这些整行都是无效的，没有任何单个输入实际上是无效的。此外，任何字段的更改都可能使该行或其他行无效。

如果我尝试添加，例如 "tr.combination"到 inputs选项，<table>不会添加 fields .看起来选项没有传递给构造函数，所以它不会返回 ParsleyField而是返回一个通用的 Parsley目的。

我离构建 ParsleyFieldMultiple 更远了，因为选择器是硬编码的并且代码高度依赖于 checkbox/radio

Answer 1

你想要完成的事情不能由 Parsley 本地完成。考虑到这似乎是一个非常具体的情况，您可能需要以下解决方案:

不要创建自定义验证器，而是使用 Parsley events执行该验证

基于重复组合的存在，调整ParsleyForm.validationResult .

这不是最优雅的解决方案，但我认为这是最简单的解决方案。其实我不认为你能找到一个优雅的解决这个问题的方法。

您可以在此测试 working jsfiddle .

// bind event after form validation
$.listen('parsley:form:validated', function(ParsleyForm) {
    // We only do this for specific forms
    if (ParsleyForm.$element.attr('id') == 'myForm') {
        var combinations = [];

        // foreach tr
        ParsleyForm.$element.find('tr').each(function() {
            var tr = $(this);

            // if there are any inputs
            if (tr.find('input').length > 0) {
                // Add a new combination based on tr's inputs
                combinations.push(tr.find('input:first').val() + '|' + tr.find('input:last').val());
            }
        });

        // sort array
        combinations = combinations.sort();

        // check if there are duplicate combinations
        for (var i = 0; i < combinations.length - 1; i++) {
            // if two combinations are equal, show message
            // and force validation result to false
            if (combinations[i + 1] == combinations[i]) {
                ParsleyForm.validationResult = false;

                $("#form-message-holder")
                    .html('There are some errors with your form')
                    .css('display', 'block');
                return false;
            }
        }

        // otherwise, validation result is true and hide the error message
        ParsleyForm.validationResult = true;
        $("#form-message-holder")
            .html('')
            .css('display', 'none');
    }
});