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

Question

我有一个场景，其中某些文本框被有条件地禁用。问题是如果先验证元素然后禁用验证消息和错误 css 保持不变。

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

有没有一种方法可以让我使用 jquery 验证框架中的内置 events/functions 检查元素是否被禁用，然后删除错误 class 和相应的消息。

我正在使用以下类似任务之一，但不完全相同。

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();
},

这是一个示例 fiddle 和一些代码。

先点击验证按钮，然后在 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 class。这可能与它们被禁用有关，您必须在禁用它们时删除 .error class。

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

Clear validation message and error style from disabled elements in jquery validation

jquery

jquery-validate