使用Parsley添加自定义多个验证

Question

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

我有时想验证一个<form>或一个部分作为一个整体并在该级别而不是在该<input>级别提供错误.

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

如果我尝试添加,比如说,"tr.combination"到inputs选项,<table>将不能添加fields.看起来这些选项不会传递给构造函数,因此它不返回a ParsleyField而是返回一个泛型Parsley对象.

我甚至更远了构建一个ParsleyFieldMultiple,因为选择器是硬编码的,代码高度依赖checkbox/radio

Answer 1

Parsley 本身无法完成您想要完成的任务。考虑到这似乎是一个非常具体的情况，您可能需要以下解决方案：

1. 使用Parsley 事件来执行验证，而不是创建自定义验证器
2. 根据重复组合的存在，调整ParsleyForm.validationResult.

这不是最优雅的解决方案，但我认为这是最简单的解决方案。实际上，我认为您无法找到解决此问题的优雅解决方案。

您可以在这个工作 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');
    }
});