Bootstrap форма модальных закрытия Перед проверкой

Question

я использовал пример здесь, чтобы построить свою форму: http://bootply.com/60244

Мой Javascript не по всей видимости, вызвана и поэтому форма закрывается, как только я нажимаю на «Сохранить изменения». Любые мысли будут оценены

Вот мой код

<!-- Modal --> 
    <div class="modal hide fade" id="mailerModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 
     <div class="modal-header"> 
      <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> 
      <h3_pink id="myModalLabel">Request a Mailer Bag</h3_pink> 
     </div> 
     <div class="modal-body"> 
      <h3_pink> </h3> 
      <form method="post" id="FormMailer" action="soon2.php"> 
       <input type="hidden" name="FormMailer" value="1"> 
       <table> 
        <tbody> 
         <tr><td>First Name</td><td><input type="text" name="contact_fname" id="contact_fname" style="width:90%"><span class="hide help-inline">This is required</span></td> 
         <td>Last Name</td><td><input type="text" name="contact_lname" id="contact_lname" placeholder="Last Name" style="width:90%"><span class="hide help-inline">This is required</span></td></tr> 
         <tr><td>Email Address</td><td colspan="3"><input type="text" name="contact_email" id="contact_email" placeholder="Email Address" style="width:90%"><span class="hide help-inline">This is required</span></td></tr> 
         <tr><td>Street1</td><td colspan="3"><input type="text" id="contact_street1" name="contact_street1" placeholder="Street" style="width:90%"><span class="hide help-inline">This is required</span></td></tr> 
         <tr><td>Street2</td><td colspan="3"><input type="text" id="contact_street2" name="contact_street2" placeholder="Street" style="width:90%"></td></tr> 
         <tr><td>City</td><td colspan="3"><input type="text" id="contact_city" name="contact_city" placeholder="City" style="width:90%"><span class="hide help-inline">This is required</span></td></tr> 
         <tr><td>Zip</td><td colspan="3"><input type="text" name="zip" id="zip" style="width:90%"><span class="hide help-inline">This is required</span></td></tr> 
         <tr><td>Message</td><td colspan="3"><textarea id="contact_message" name="contact_message" style="width:90%"></textarea></td></tr> 
        </tbody> 
       </table> 
      </form> 
     </div><!-- /.modal-body --> 
     <div class="modal-footer"> 
      <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button> 
      <button class="btn btn-primary" data-dismiss="modal" id="FormMailerSubmit">Save changes</button> 
     </div> 
    </div><!-- /.modal --> 
    <!-- Modal Ends --> 

    <script src="https://code.jquery.com/jquery.js"></script> 
    <script src="/soon/js/bootstrap.js"></script> 
    <link rel="stylesheet" href="soon/styles/bootstrap.min.css" media="screen" /> 
    <link rel="stylesheet" href="soon/styles/bootstrap-responsive.min.css" media="screen" /> 
    <link rel="stylesheet" href="soon/styles/style.css"/> 
    <link rel="stylesheet" href="soon/styles/style_responsive.css"/> 

    <script type='text/javascript'> 
     $(document).ready(function() { 
      $('#FormMailerSubmit').click(function(){ 
      if ($('#contact_fname').val()==="") { 
        // invalid 
        $('#contact_fname').next('.help-inline').show(); 
        return false; 
       } 
       else { 
        // $('#FormMailer').submit(); 

        return true; 
       } 
      }); 
     });   
    </script> 

Answer 1

его закрытия из-за атрибута на кнопке data-dismiss="modal". Удалите это, и он не будет закрыт. Если вам нужно, чтобы закрыть его в ваших JS вы можете использовать modal.modal('hide');

Answer 2

Хорошо, первые вещи первых

• указать тип всех кнопок - по умолчанию типа должен быть submit кнопки, а не нормальная кнопка ,

• Возможно, вы захотите сделать валидацию в модальном hide событиях. Если данные недействительны, верните false из обработчика событий, а он не будет закрыт. Это просто оставляет вам небольшую проблему идентификации пришло ли событие от закрытия/кнопки или намеченной кнопки отправки отмены ....