JQuery-форма обратных вызовов проверки не работает

Question

Я использую jQuery-FormValidator плагин для проверки формы на стороне клиента, но независимо от того предложение они дали в приведенной выше ссылке, чтобы добавить функцию обратного вызова функция не обжиг, тогда как собственно ошибки будут отображаться при попытке подать. Что еще мне нужно добавить к нижеприведенному коду, чтобы эти события работали?

$.validate("#contact-form",{ 
    validateOnBlur: true, // disable validation when input looses focus 
    errorMessagePosition: 'top', 
    scrollToTopOnError: true, // Set this property to true if you have a long form 
    onError: function() { 
     alert('hi'); 
     $('html,body').animate({ 
      'scrollTop': '2994' 
     }); 
     toastr.error("Validation errors", "Error"); 
    }, 
    onSuccess : function() { 
     alert('The form is valid!'); 
     return false; // Will stop the submission of the form 
    } 
}); 

Вынесено HTML

<form action="/Home/SendMessage" class="wow bounceInUp has-validation-callback animated" data-wow-delay="0.2s" data-wow-offset="10" id="contact-form" method="post" style="visibility: visible;-webkit-animation-delay: 0.2s; -moz-animation-delay: 0.2s; animation-delay: 0.2s;"> <div class="row marginbot-20"> 
     <div class="col-md-6 xs-marginbot-20 has-error"> 
      <input class="form-control input-lg error" data-val="true" data-val-required="The name field is required." data-validation="length" data-validation-length="min5" id="name" name="name" placeholder="Enter name*" type="text" value="" current-error="The input value is shorter than 5 characters" style="border-color: red;"> 
     <span class="help-block form-error">The input value is shorter than 5 characters</span></div> 
     <div class="col-md-6 has-error"> 
      <input class="form-control input-lg error" data-placement="top" data-toggle="tooltip" data-val="true" data-val-required="The email field is required." data-validation="email" id="email" name="email" placeholder="Enter email*" title="" type="text" value="" data-original-title="Your email id will be kept private" current-error="You have not given a correct e-mail address" style="border-color: red;"> 
     <span class="help-block form-error">You have not given a correct e-mail address</span></div> 
    </div> 
    <div class="row"> 
     <div class="col-md-6 xs-marginbot-20"> 
      <div class="form-group has-error"> 
       <input class="form-control input-lg error" data-placement="top" data-toggle="tooltip" data-val="true" data-val-required="The contact field is required." data-validation="custom" data-validation-regexp="^[789]\d{9}$" id="contact" name="contact" placeholder="Enter contact*" title="" type="text" value="" data-original-title="We will reach you with this contact info" current-error="The input value is incorrect" style="border-color: red;"> 
      <span class="help-block form-error">The input value is incorrect</span></div> 
      </div> 
     <div class="col-md-6 has-error"> 
      <input class="form-control input-lg error" data-val="true" data-val-required="The subject field is required." data-validation="length" data-validation-length="10-100" id="subject" name="subject" placeholder="Enter subject*" type="text" value="" current-error="The input value must be between 10-100 characters" style="border-color: red;"> 
     <span class="help-block form-error">The input value must be between 10-100 characters</span></div> 

     <div class="col-md-12"> 
      <div class="form-group has-error"> 
       <textarea class="form-control error" cols="25" data-val="true" data-val-required="The message field is required." data-validation="length" data-validation-length="30-400" id="message" name="message" placeholder="Your Message [Max 400 characters]*" rows="4" current-error="The input value must be between 30-400 characters" style="border-color: red;"></textarea> 
       <div class="text-right"> <span id="maxlength">400</span> characters left</div> 
      <span class="help-block form-error">The input value must be between 30-400 characters</span></div> 
      <button type="submit" class="btn btn-skin btn-lg btn-block btn-border" id="btnContactUs"> 
       Send Message 
      </button> 
     </div> 
    </div> 
</form> 

Answer 1

Ok. Вот как это должно быть:

$.validate({ 
    form:'#contact-form', 
    validateOnBlur: true, // enable validation when input looses focus 
    scrollToTopOnError: true, // Set this property to true if you have a long form 
    borderColorOnError: "#a94442", 
    borderColorOnSuccess:"#a94442", 
    onError: function() { 
     //Display error message 
     return false; 
    }, 
    onSuccess: function() { 
     $("#btnContactUs").button('loading'); 
     $('.form-contact form').find('input,textarea').attr('readonly', true).addClass('disabled'); 
     var formdata = new FormData($('.form-contact form').get(0)); 
     $.when(
      $.ajax({ 
       url: $("#contact-form").attr('action'), 
       type: 'POST', 
       data: formdata, 
       processData: false, 
       contentType: false, 
       success:function(data) 
       { 
        if(data.result) 
        { 
         //success Message 
        } 
        else 
        { 
         //Serverside error 
        } 
       }, 
       error:function(data) 
       { 
        //Server side error 
       } 
      }) 
     ).then(function(){ 
      $("#btnContactUs").button('reset'); 
      $('.form-contact form').find('input,textarea').attr('readonly', false).removeClass('disabled'); 
     }); 
     return false; // Will stop the submission of the form 
    } 
});