jQuery Validateのエラーメッセージをアニメ化する

Question

最初にというメッセージが表示されたときに、jQuery検証プラグインのエラーメッセージにスムーズなアニメーションを使用するのはかなり簡単です。しかし、最初のerrorPlacementコールバックが実行された後、ユーザーが入力を変更し続けると、メッセージのアニメーションを維持する方法がわかりません。

この例では、最初に表示されたときにエラーメッセージを展開してフェーディングしています。その後、エラーメッセージが有効であるかどうかに応じてフェードインまたはフェードアウトし続けます。しかし、メッセージがすぐに表示されたり消えたりする（あまり視覚的に魅力的ではない）デフォルトの機能だけが私のために働いています。

TL; DR：

は、私は、エラーメッセージが常に点滅ではなく、フェードインとフェードアウトします。

JSFiddle example

HTML

<form id="contactForm" class="form-horizontal" autocomplete="off"> 
    <fieldset> 
    <h4 style="margin-bottom: 20px; margin-top: 20px;" class="text-center">Contact us today for a free thing</h4> 

    <div class="form-group"> 
     <span class="col-xs-offset-1 col-xs-1 text-center"><i class="fa fa-user bigicon" aria-hidden="true" title="Name"></i></span> 
     <div class="col-xs-9"> 
     <input type="text" name="Name" placeholder="Name" class="form-control hps-text-box"> 
     </div> 
    </div> 

    <div class="form-group"> 
     <span class="col-xs-offset-1 col-xs-1 text-center"><i class="fa fa-envelope-o bigicon" title="Email address"></i></span> 
     <div class="col-xs-9"> 
     <input type="text" name="Email" placeholder="Email address" class="form-control hps-text-box"> 
     </div> 
    </div> 

    <div class="form-group"> 
     <span class="col-xs-offset-1 col-xs-1 text-center"><i class="fa fa-phone-square bigicon" title="Phone number"></i></span> 
     <div class="col-xs-9"> 
     <input type="text" placeholder="Phone number (eg. 123-456-7890)" class="form-control hps-text-box"> 
     </div> 
    </div> 

    <div class="form-group"> 
     <span class="col-xs-offset-1 col-xs-1 text-center"><i class="fa fa-pencil-square-o bigicon" title="Enter your message for us here."></i></span> 
     <div class="col-xs-9"> 
     <textarea name="UserMessage" rows="7" placeholder="Enter your message for us here. We will get back to you within 2 business days." class="form-control hps-text-box"></textarea> 
     </div> 
    </div> 

    <div class="form-group"> 
     <div class="col-md-12 text-center"> 
     <button id="submitButton" type="submit" class="btn btn-primary" autocomplete="off">Submit</button> 
     </div> 
    </div> 
    </fieldset> 
</form> 

はJavaScript

$(document).ready(function() { 
    $("#contactForm").validate({ 
    rules: { 
     Name: "required", 
     Email: { 
     required: true, 
     email: true 
     }, 
     UserMessage: "required", 
     Phone: { 
     phoneUS: true 
     } 
    }, 
    messages: { 
     Name: "Please provide your name", 
     Email: "Please enter a valid email address", 
     UserMessage: "Please enter a message" 
    }, 
    errorElement: "div", 
    errorClass: "jqval-error", 
    errorPlacement: function(error, element) { 
     error.insertAfter(element); 
     error.slideDown(400); 
     error.animate({ opacity: 1 }, { queue: false, duration: 700 }); 
    }, 
    submitHandler: function(form) { 
     alert("Form submitted"); 
    } 
    }) 
}); 

CSS

input, 
select, 
textarea { 
    max-width: none; 
} 

.hps-text-box { 
    margin-left: 10px; 
} 

.bigicon { 
    font-size: 34px !important; 
} 

div.jqval-error { 
    display: none; 
    opacity: 0; 
    margin-left: 18px; 
    color: #f39200; 
    font-weight: bold; 
} 

Answer 1

これは些細な要求ではありません。 stackoverflow.com/a/14741689/594235

検証メッセージは次のように設定されている：あなたはまた、Tooltipsterプラグインを使用して同様の動作のためにこの答えを見るなど、the docsを研究し、そのようerrorPlacement、successなど、さまざまなコールバック関数で遊んでかなりの時間を費やす必要がありますプラグインを使用して操作する前に、プラグインでdisplay: noneを操作してください。プラグインのオプション、コールバック、メソッド、またはフックでは検証が成功した後でも、メッセージが削除され、ラベルが隠される前に何かを行うことができます。

基本的には、ツールチップの機能&のいくつかを再作成する必要があります。そこでは、メッセージのテキストを抽出して保存し、エラー&成功時に完全に処理します。

---

EDIT：

The showErrors callbackはあなたが各エラーのテキストとそれに対応する入力要素にアクセスする必要がありますエラーマップやエラーのリストを提供します。注：このコールバックを使用するだけで、デフォルトのエラーメッセージも抑制されます（目的に合ったもの）。まだいくつかの努力が、おそらくこれは車輪を再発明するより簡単です。