jqueryの検証で無効な要素からの検証メッセージとエラースタイルをクリアします。

Question

一部のテキストボックスが条件付きで無効になっているシナリオがあります。 問題は、要素が最初に検証され、検証メッセージが無効になり、エラーcssがそのまま残っている場合です。

私は手動でメッセージとスタイルを削除できますが、フレームワークの使用に違反します。

jQuery検証フレームワークの組み込みイベント/関数を使用して要素が無効になっているかどうかを確認し、エラークラスと対応するメッセージを削除する方法はありますか？

私は同様のタスクの1つに次のものを使用していますが、まったく同じではありません。

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といくつかのコードがあります。あなたのハンドラ内から.valid()を使用して検証テストを強制する必要があります

最初の検証]ボタンをクリックし、その後の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

。また...

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

DEMO keyupイベントを追加：http://jsfiddle.net/vLv09Let/4/

また、他の場所であなたのコード内で起こって非常に奇妙な何かを持っています。フォームは有効で、検証エラーはもう存在しないため、要素には.errorクラスは存在しません。それらを無効にする必要があるかもしれないので、無効にするときには.errorクラスを削除する必要があります。