BootstrapValidator, не показывающий сообщение об успешном завершении

Question

Редактировать: Исходный кодп, который я использовал, это here. Единственное различие заключается в том, что в HTML я изменил action=' ' (он был пустым, весь код php был в том же файле, что и форма) до action='mail-form.php'. Это почему javascript не работает?

Я использую bootstrapvalidator для проверки на моей php-форме. Он отлично работает, но когда я отправляю форму, вместо того, чтобы показывать свое уведомление об успехе, он отправляется на страницу формы action. Форма работает и отправляется электронное письмо.

Вот моя форма декларации:

<form class="well form-horizontal" action="mail-form.php" method="post" id="contact_form"> 

Вот вызов бутстрапом валидатора, чтобы отправить форму в моей JavaScript:

$(document).ready(function() { 
    $('#contact_form').bootstrapValidator({ 
     // To use feedback icons, ensure that you use Bootstrap v3.1.0 or later 
     feedbackIcons: { 
      valid: 'glyphicon glyphicon-ok', 
      invalid: 'glyphicon glyphicon-remove', 
      validating: 'glyphicon glyphicon-refresh' 
     }, 
     // Removed validation rules for brevity // 
     .on('success.form.bv', function(e) { 
      $('#success_message').slideDown({ opacity: "show" }, "slow") // Do something ... 
       $('#contact_form').data('bootstrapValidator').resetForm(); 

      // Prevent form submission 
      e.preventDefault(); 

      // Get the form instance 
      var $form = $(e.target); 

      // Get the BootstrapValidator instance 
      var bv = $form.data('bootstrapValidator'); 

      // Use Ajax to submit form data 
      $.post($form.attr('action'), $form.serialize(), function(result) { 
       console.log(result); 
      }, 'json'); 
     }); 
}); 

Когда я отправить форму после того, как проверка прошла успешно, он направляет меня к форме action которая mail-form.php. Я ожидал, что он просто покажет #success-message div, как указано выше в javascript, но это не так. Просто открывается mail-form.php, который представляет собой пустую страницу, которая отображает значения полей, которые были отправлены (для моей отладки).

Если это помогает, вот где я добавляю свои файлы сценариев в нижний колонтитул моих страниц.

... 
    </footer> 
    <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script> 
    <script src="js/bootstrap.min.js"></script> 
    <?php if (basename($_SERVER['PHP_SELF']) == "contact.php") { ?> 
     <script src="https://www.google.com/recaptcha/api.js"></script> 
    <?php } ?> 

    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-validator/0.4.5/js/bootstrapvalidator.min.js"></script> 
    <script src="js/scripts.js"></script> 
</body> 

Я всегда говорил какое-либо объявлению сценария, необходимое, чтобы быть в конце файла, так что они загружаются прямо перед страница полностью загружена. Я не знаю, является ли это причиной для меня проблема (я новичок в JQuery)

Answer 1

Добавить это представить событие, чтобы предотвратить форму от представления по щелчку

$('#contact_form').on('submit',function(e){ 
e.preventDefault(); 
}); 

или использовать функцию:

submitHandler: function(validator, form, submitButton) {} 

см: http://codepen.io/anon/pen/MadxaE?editors=001