jquery validate pluginカスタムエラークラスasigned div to親div

Question

jQueryで検証するプラグインを検証するフォームがあります。

これは、検証のための私のjQueryのコードです：私は私ではないの入力フィールドに、親のdivに追加する必要がerrorClassを追加した

$('#authForm').validate({ 
       rules: { 
        Email: { 
         required: true, 
         email: true 
        }, 
        Password: { 
         required: true 
        }, 
        PasswordAgain: { 
         equalTo: "#Password" 
        }, 
        Name: { 
         required: true 
        } 
       }, 
       errorClass: "invalid", 
       errorPlacement: function(error, element) { } 
      }); 

：

の一つのHTML構造

<div class="form-group form-group-custom "> 
              <label>Email Address</label> 
              <input name="Email" type="text" class="form-control invalid" value="test@test.com" aria-required="true" aria-describedby="Email-error" aria-invalid="true"> 
             </div> 

そして、あなたが気づいた場合、「invalid」クラスは、実際に正しい入力要素に追加されましたが、私はAppenにする必要があります。フィールドは、このようなものですそれを私の<div class="form-group form-group-custom">に書いてください。また、検証がうまくいけば削除してください。

ヒント？

Answer 1

highlightおよびunhighlightは、有効/無効になったときにクラスを適用/削除するために常に使用されます。 target your parent divというカスタムjQuery DOMトラバーサル関数を書くだけです。

$('#authForm').validate({ 
    rules: { 
     .... 
    }, 
    .... 
    highlight: function(element, errorClass, validClass) { 
     $(element).parent('div').addClass(errorClass).removeClass(validClass); 
    }, 
    unhighlight: function(element, errorClass, validClass) { 
     $(element).parent('div').addClass(validClass).removeClass(errorClass); 
    }, 
    .... 

クラスではなく、事前に設定したクラスを表すキーワードを使用するのでは、その後、自動的にプラグインによって適用されるクラスから完全に分離する必要がある場合は、あなたが望むように名前を変更し、異なるクラスを使用します。

highlight: function(element, errorClass, validClass) { 
     $(element).parent('div').addClass('myerrorclass').removeClass('myvalidclass'); 
    }, 
    unhighlight: function(element, errorClass, validClass) { 
     $(element).parent('div').addClass('myvalidclass').removeClass('myerrorclass'); 
    },