清除jQuery验证中禁用元素的验证消息和错误样式

Question

我有一个方案，其中有条件地启用了一些文本框。问题是，是否首先验证了元素，然后禁用验证消息和错误CSS保持完整。

我可以手动删除消息和样式，但随后我们违反了框架的使用。

是否有一种方法可以使用jQuery验证框架中的内置事件/函数检查元素是否被禁用，然后删除错误类和相应的消息。

我正在使用以下来处理类似任务之一，但并非完全相同。

showErrors: function (errorMap, errorList) {
    var objManualMsgId = [];
    objManualMsgId.push('MSG2');
    objManualMsgId.push('MSG3');
    $.each(objManualMsgId, function (e) {
        $('#msgPane').find('div[id=' + objManualMsgId[e] + ']').remove();
    });
    this.defaultShowErrors();
},

这是一个样本小提琴和一些代码。

首先单击" validate"按钮，然后在TextBox1和TextBox4

中输入值

    $(function(){
$("#f3").validate({
    onclick: false,
    onfocusout: false,
    errorContainer: '#errorContainer',
    errorLabelContainer: $("ol", '#errorContainer'),
    wrapper: 'li',
    meta: "validate",
    rules: {
        // note: you can use variable to avoid repeating 
        // of the same code
        a: {
                    validateRequired: ['L', $('#a'), $('#b') , $('#c') , $('#d')]
        },
        b: {
                    validateRequired: ['W', $('#a'), $('#b') , $('#c') , $('#d')]
        },
        c: {
                    validateRequired: ['H', $('#a'), $('#b') , $('#c') , $('#d')]
        },
        d: {
                    validateRequired: ['D', $('#a'), $('#b') , $('#c') , $('#d')]
        }
    },
    success: function(label) {
        //label.html(" ").addClass("checked"); 
    },
    submitHandler: function() {
        alert('successful submit');
    }
});
$.validator.addMethod("validateRequired", function(value, element, options) {
    var objCaller = options[0],
        objA = $(options[1]),
        valA = objA.val().trim(),
        objB = $(options[2]),
      valB = objB.val().trim(),
      objC = $(options[3]),
      valC = objC.val().trim(),
      objD = $(options[4]),
      valD = objD.val().trim(),
      returnVal,
        isAEnabled = true,
            isBEnabled = true,
            isCEnabled = true,
            isDEnabled = true;
if(objCaller == 'L' && !valA)
        return false;
else
    returnVal = true;
if(objCaller == 'W' && !valB)
        return false;
else
    returnVal = true;
if(objCaller == 'H' && !valC)
        return false;
else
    returnVal = true;
if(objCaller == 'D' && !valD)
        return false;
else
    returnVal = true;
    return returnVal;
}, function (param, element) {     
    var errormessage = $.validator.format('{0} can not be left blank', $(element).name);
    return errormessage;
});

Answer 1

您需要在处理程序内使用.valid()强制验证测试。还添加keyup事件...

$(document).on('blur keyup', '#a, #b, #c, #d', function(e) {
    e.preventDefault();
    var options = ['x', '#a', '#b', '#c', '#d'];
    enableDisable(options);
    $("#f3").valid(); // <- force validation test
});

演示：http：//jsfiddle.net/vlv09let/4/

您的代码其他地方也有一些非常奇怪的事情。由于表单是有效的，并且没有更多的验证错误，因此该元素上不应有.error类。这可能与他们被禁用有关，并且在禁用它们时必须删除.error类。