提交我的引導表單時出現jQuery錯誤

Question

我有一個小的註冊表單，我嘗試使用引導程序的submitHandler提交此表單，但它給了我一個Uncaught TypeError: Cannot read property 'attr' of null。

我使用此代碼來驗證並提交：

$(document).ready(function(){ 
     //To validate the registration form and save its value after validation 
     $('#registerForm').bootstrapValidator({ 
      message: 'This value is not valid', 
      feedbackIcons: { 
       valid: 'glyphicon glyphicon-ok', 
       invalid: 'glyphicon glyphicon-remove', 
       validating: 'glyphicon glyphicon-refresh' 
      }, 
      fields: { 
        email: { 
        validators: { 
         notEmpty: { 
           message: 'The email is required and cannot be empty' 
         }, 
         emailAddress: { 
          message: 'The input is not a valid email address' 
         } 
        } 
       },     
       password: { 
        validators: { 
         notEmpty: { 
          message: 'The password is required and cannot be empty' 
         } 
        } 
       }, 
       confirmPassword: { 
          validators: { 
         notEmpty: { 
          message: 'The password is required and cannot be empty' 
         } 
        } 
       }, 
       submitHandler: function(form) { // <- only fires when form is valid 
        $.ajax({ 
         type: 'POST', 
         url: 'include-ajax/check_and_save_registration_form.php', 
         data: $(form).serialize(), 
         success: function() { 
          $(form).fadeOut(500, function(){ 
           $(form).html("USER DONE!").fadeIn(); 
          }); 
         } 
        });   // <- end '.ajax()' 
        return false; // <- block default form action 
       } 
      } 
     }); 
    }); 

我爲什麼會得到這個錯誤？當我刪除submitHandler時，我沒有得到那個錯誤，但我需要它將表單數據存儲在我的數據庫中。

數據驗證正確但未提交。我也使用submitHandler: function(validator, form, submitButton)。 仍然給出相同的錯誤。 如何提交表單而不會出錯？

我的HTML：

<div class="pages_container"> 
    <form id="registerForm" method="post" class="form-horizontal"> 
     <div class="form-group"> 
      <label class="col-lg-3 control-label">Email address</label> 
      <div class="col-lg-6"> 
       <input class="form-control" name="email" type="email" /> 
      </div> 
     </div>    
     <div class="form-group"> 
      <label class="col-lg-3 control-label">Password</label> 
      <div class="col-lg-6"> 
       <input type="password" class="form-control" name="password" /> 
      </div> 
     </div> 

     <div class="form-group"> 
      <label class="col-lg-3 control-label">Retype password</label> 
      <div class="col-lg-6"> 
       <input type="password" class="form-control" name="confirmPassword" /> 
      </div> 
     </div> 

     <div class="form-group"> 
      <div class="col-lg-6 col-lg-offset-3"> 
       <button type="submit" class="btn btn-primary btn-lg btn-block">Register</button> 
      </div> 
     </div>  
     </div> 
    </form> 
</div> 

Answer 1

請參閱此頁的正確方法通過AJAX提交表單：Using Ajax to Submit the Form

$(document).ready(function() { 
    $(form) 
     .bootstrapValidator({ 
      ... options ... 
     }) 
     .on('success.form.bv', function(e) { 
      // 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) { 
       // ... Process the result ... 
      }, 'json'); 
     }); 
});