jQueryによって作成されたラベルを隠す検証

Question

jQuery検証を使用して検証するフォームがあります。私が抱えている問題は、ユーザーがテキストボックスとやりとりした後、jQuery Validationがその下にあるすべてのものをプッシュするラベルを挿入することです。ここでは、フォームのための私のHTMLコード

<form id="addForm"> 
    <div class="form-group"> 
    <label for="first">First Name</label> 
    <input type="text" class="form-control" name="first" id="first" placeholder="First Name"> 
</div> 
<div class="form-group"> 
    <label for="last">Last Name</label> 
    <input type="text" class="form-control" name="last" id="last" placeholder="Last Name"> 
</div> 
<button type="submit" class="btn btn-primary">Send</button> 
</form> 

検証スクリプト

$('#addForm').validate({ 
    rules: { 
     first: { 
      required: true 
     }, 
     last: { 
      required: true 
     } 
    }, 
    highlight: function (element) { 
     $(element).closest('.form-group').removeClass('has-success').addClass('has-danger'); 
     $(element).closest('.form-control').removeClass('form-control-success').addClass('form-control-danger'); 
    }, 
    success: function (element) { 
     element.closest('.form-group').removeClass('has-danger'); 
    } 

}); 

がある私は、成功関数に

element.closest('.error').hide(); 

を追加しようとしたが、それは何もしません。 私は空errorPlacement機能に

errorPlacement: function(error, element) { 

} 

を追加しようと、それが多少動作します。ただし、エラーが修正されると、テキストボックスの周囲のハイライト表示がクリアされる機能が停止します。ここで

は、あなただけの成功のラベルを削除する必要がJSFiddle

https://jsfiddle.net/q9bppocn/

Answer 1

です。

unhighlightとhighlightを使用してください。これらは補完的な関数であり、連携するとエラーを適切に切り替えることができます。 success関数は、通常は隠されている場合に限り、label要素を利用するためのものです。

highlight: function(element) { 
    $(element).closest('.form-group').removeClass('has-success').addClass('has-danger'); 
    $(element).closest('.form-control').removeClass('form-control-success').addClass('form-control-danger'); 
}, 
unhighlight: function(element) { 
    $(element).closest('.form-group').addClass('has-success').removeClass('has-danger'); 
    $(element).closest('.form-control').addClass('form-control-success').removeClass('form-control-danger'); 
} 

DEMO：よりクリーンで、正常に動作します@Sparkyの答えでjsfiddle.net/vboantcf/

Answer 2

へのリンクです。

JS

$('#addForm').validate({ 
    rules: { 
     first: { 
      required: true 
     }, 
     last: { 
      required: true 
     } 
    }, 
    highlight: function (element) { 
     $(element).closest('.form-group').removeClass('has-success').addClass('has-danger'); 
     $(element).closest('.form-control').removeClass('form-control-success').addClass('form-control-danger'); 
    }, 
    success: function (element) { 
     element.remove(); 
    } 

}); 

はここでプラグインが自動的にメッセージを切り替えているので、あなたがエラーを "削除" する必要はありませんjsFiddle.