Jquery validate - zeige Nachrichten mit Toastr

Question

Ich benutze jquery validate.js für die Validierung eines Formulars. Ich möchte die Validierungsmeldungen als Toastr Pop-ups zeigen, habe ich versucht, die Toastr Funktion wie folgt hinzuzufügen:

.... 
messages: { 
    "email": { 
     required: function() { 
      toastr.warning("Warning") 
     }, 
     email: "Email is invalid" 
    } 
}, 
.... 

aber es hält das Popup aus irgendeinem Grund duplizieren - und statt eines Popup - es schafft 3. ... ich möchte auch Nachrichten um Doppelarbeit zu vermeiden - so, wenn es eine Fehlermeldung als nur einen Willen angezeigt - egal, wie oft der Benutzer einreichen ...

Fiddle

Answer 1

Verstanden ...

  <form id="formParams"> 
      <div class="form-group"> 
       <label for="exampleFormControlInput1">Email address</label> 
       <input type="email" class="form-control" name="email" placeholder="name@example.com"> 
      </div> 

      <div class="form-group"> 
       <label for="phone"> multiple select</label> 
       <input id="phone" class="form-control" type="tel" name="phone"> 
      </div> 
      <div class="form-group"> 
       <label for="exampleFormControlTextarea1">Example textarea</label> 
       <textarea class="form-control" name="textarea" rows="3"></textarea> 
      </div> 
      <button type="submit" class="btn btn-primary"> 
       Submit 
      </button> 
     </form> 

Js

$ (document) .ready (function() {

  $("#formParams").validate({ 

       rules: { 
        "email": { 
         required: true, 
        }, 
        "phone": { 
         required: true, 
        }, 

       }, 
       messages: { 
        "email": { 
         required: function() { 
          toastr.error('email field is required') 
         }, 
        }, 
        "phone": { 
         required: function() { 
          toastr.error('phone field is required') 
         }, 

        }, 

       }, 
       submitHandler: function (form) { // for demo 
        toastr.success('success') 
        return false; // for demo 
       } 
      }); 
     });