bootstrapValidator ajax請求，提交後阻止關閉bootstrap模態

Question

嗨使用bootstrapValidator來驗證我的表單，我不知道在驗證表單後添加ajax請求。並且還希望在提交表單後阻止關閉引導模式。我提到了類似的問題，但仍然無法實現。

這裏是我的自舉模式

<a href="#"class="btn btn-lg btn-black ico-windows" data-backdrop="static" data-keyboard="false" data-toggle="modal" data-target="#AddAlbum" > Create New Album </a> 
<!-- Modal --> 
<div class="modal fade" id="AddAlbum" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 
    <div class="modal-dialog"> 
     <div class="modal-content"> 
      <div class="modal-header"> 
       <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button> 
       <h4 class="modal-title" id="myModalLabel">Create New Album</h4> 
      </div> 
      <div class="modal-body"> 
       <div id="formregister"> 
        <form action="" class="form-horizontal" role="form" id="newAlbum" > 
         <p class="qc-errmsg" style="display: none;">&nbsp;</p> 
         <div class="form-group"> 
          <label for="inputEmail3" class="col-sm-2 control-label">Album Name</label> 
          <div class="col-sm-10"> 
           <input type="text" class="form-control" id="inputEmail3" name="albumName" placeholder="Album Name"> 
          </div> 
         </div> 
         <div class="form-group"> 
          <label for="inputEmail3" class="col-sm-2 control-label" >Description</label> 
          <div class="col-sm-10"> 
           <textarea class="form-control" rows="3" name="description"></textarea> 
          </div> 
         </div> 
         <div class="form-group"> 
          <div class="col-sm-offset-2 col-sm-10"> 
           <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
           <button type="submit" onclick="send()" value="cart" class="btn btn-primary">Save Changes</button> 

          </div> 
         </div> 
        </form> 
       </div> <!-- form register --> 
       <div id="successfulpost" style="font: bold 12px Verdana, Arial, Helvetica, sans-serif; color: #ff0000; display: none;"> 
        <p class="jst-txt"><span>Thank you,</span> for showing your Interest !!</p> 
        <p class="jst-txt">Our property advisor shall get in touch with you very shortly..</p> 
       </div> 
      </div> <!-- model body--> 
     </div> 
    </div> 
</div> 

這裏是我的javascript

$(document).ready(function() { 
    //validations 
    $('#newAlbum').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' 
     }, 
     fields: { 
      albumName: { 
       message: 'The Album Name is not valid', 
       validators: { 
        notEmpty: { 
        message: 'The Album Name is required and cannot be empty' 
        }, 
        stringLength: { 
         min: 6, 
         max: 30, 
         message: 'The Album Name must be more than 6 and less than 30 characters long' 
        }, 
        regexp: { 
         regexp: /^[a-zA-Z0-9]+$/, 
         message: 'The Album Name can only consist of alphabetical and number' 
        } 
       }, 
       //form.submit(); 
      } 
     } 
    }, 
    submitHandler: function(form) { 
    $(form).ajaxSubmit({ 
     url: "add_album.php", 
     type: "POST", 
     success: function() { 
      alert('done'); 
      $('#newAlbum').hide(); 
      $('#successfulpost').show(); 
     } 


    }); 
}); 

我犯了一個jsbin這個 http://jsbin.com/xatog/8/edit?html,js,output

Answer 1

您使用的版本0.5.3。他們刪除了submithandler選項並添加了事件success.form.bv。

$(form) 
    .bootstrapValidator(options) 
    .on('success.form.bv', function(e) { 
     // Prevent form submission 
     e.preventDefault(); 

     var $form  = $(e.target), 
     validator = $form.data('bootstrapValidator'), 
     submitButton = validator.getSubmitButton(); 

     // Do whatever you want here ... 
    }); 

源here

Fiddle here