javascript - 在 'parsley:field:success' 上使用多个 Parsley Field 实例？

Question

我正在尝试在验证了两个特定字段后删除表单上的验证消息。

我可以在一个字段成功验证时执行此操作，但当多个字段(甚至可能是一组)已被验证时我将如何执行此操作？

下面是我想要完成的

$.listen('parsley:field:success', function (parsleyField) {
    if ((parsleyField.$element.attr('name') == 'field1')) && ((parsleyField.$element.attr('name') == 'field2')){
        $(".tab-nav-1").removeClass("tab-validation-error")
    }
});

有没有办法在验证一组字段时执行某些操作(即使表单未验证)？

Answer 1

这不起作用，因为 parsleyField 仅与一个字段相关联。也就是说，如果您有一个包含两个(有效)输入的表单，则该函数将为每个输入执行一次。

更新的解决方案

查看Parsley's events事实证明，您可以使用 parsley:form:validated ，它在执行表单验证后触发。使用此事件大大简化了解决方案，因为您可以简单地检查输入是否有效。这是您需要的代码 ( jsfiddle available ):

$.listen('parsley:form:validated', function (parsleyForm) {
    var isValidField1 = $("input[name=field1]").parsley().isValid(),
        isValidField2 = $("input[name=field2]").parsley().isValid();

    if (isValidField1 && isValidField2) {
        $(".tab-nav-1").removeClass("tab-validation-error");
    } else {
        $(".tab-nav-1").addClass("tab-validation-error");
    }
});

---

原始解决方案

您可以创建一个数组来存储输入字段并在它们变得无效时将其删除。然后，每次执行验证时，只需检查数组中是否存在字段，如果存在，则删除该类。否则，添加类。

诚然，解决方案并不像人们希望的那样直接。看看下面的代码 ( jsfiddle available )

// this will store our valid fields
var validFields = [];

$("form").parsley();

// whenever a field is valid
$.listen('parsley:field:success', function (parsleyField) {
    // add this field's name to the array
    addToArray(parsleyField.$element.attr('name'));

    // Do we have both fields within the array?
    if ($.inArray('field1', validFields) != -1 && $.inArray('field2', validFields) != -1) {
        // If so, remove the class
        $(".tab-nav-1").removeClass("tab-validation-error");
    } else {
        // Otherwise, add the class. There could be a time 
        $(".tab-nav-1").addClass("tab-validation-error");
    }
});

// Whenever an error occurs, lets remove the field from the array
$.listen('parsley:field:error', function (parsleyField) {
    removeFromArray(parsleyField.$element.attr('name'));
});

/**
 * Adds a string to an array
 */
function addToArray(fieldName) {
    // For our case, we're just adding the value if it matches our fields
    if ($.inArray(fieldName, validFields) === -1 && (fieldName == 'field1' || fieldName == 'field2')) {
        validFields.push(fieldName);
    }
}

/**
 * Removes a string from an array
 */
function removeFromArray(fieldName) {
    // For this case, we discard the fields that don't match the fields we need
    if (fieldName != 'field1' && fieldName != 'field2')
        return;

    // So, add the field if it doesn't exist in the array
    if ($.inArray(fieldName, validFields) != -1) {
        for(var i = validFields.length - 1; i >= 0; i--) {
            validFields.splice(i, 1);
        }
    }
}