ajax加載內容中的bootstrapvalidator

我將使用bootstrapvalidator，因爲我使用的是bootstrap。它工作正常，但我有一些內容我會通過ajax加載。當這些內容包含表單時，bootstrapvalidator將不起作用。我創建了一個小例子來演示。ajax加載內容中的bootstrapvalidator

它基於formWithoutLabels.html bootstrapvalidator下載示例。

我複製到formWithoutLabels2.html和formWithoutLabels2.html與

<div id="result"> 
</div>

替換形式的內容在JavaScript車我想補充一個Ajax請求

$("#result").load("content.html");

formWithoutLabels2.html：

<!DOCTYPE html> 
<html> 
<head> 
<title>BootstrapValidator demo</title> 

<link rel="stylesheet" href="../vendor/bootstrap/css/bootstrap.css"/> 
<link rel="stylesheet" href="../dist/css/bootstrapValidator.css"/> 

<script type="text/javascript" src="../vendor/jquery/jquery-1.10.2.min.js"></script> 
<script type="text/javascript" src="../vendor/bootstrap/js/bootstrap.min.js"></script> 
<script type="text/javascript" src="../dist/js/bootstrapValidator.js"></script> 
</head> 
<body> 
<div id="result"> 
</div> 

<script type="text/javascript"> 
$("#result").load("content.html"); 


$(document).ready(function() { 
$('#defaultForm').bootstrapValidator({ 
    message: 'This value is not valid', 
    feedbackIcons: { 
     valid: 'glyphicon glyphicon-ok', 
     invalid: 'glyphicon glyphicon-remove', 
     validating: 'glyphicon glyphicon-refresh' 
    }, 
    fields: { 
     username: { 
      message: 'The username is not valid', 
      validators: { 
       notEmpty: { 
        message: 'The username is required and can\'t be empty' 
       }, 
       stringLength: { 
        min: 6, 
        max: 30, 
        message: 'The username must be more than 6 and less than 30 characters long' 
       }, 
       regexp: { 
        regexp: /^[a-zA-Z0-9_\.]+$/, 
        message: 'The username can only consist of alphabetical, number, dot and underscore' 
       } 
      } 
     }, 
     email: { 
      validators: { 
       notEmpty: { 
        message: 'The email address is required and can\'t be empty' 
       }, 
       emailAddress: { 
        message: 'The input is not a valid email address' 
       } 
      } 
     }, 
     password: { 
      validators: { 
       notEmpty: { 
        message: 'The password is required and can\'t be empty' 
       }, 
       identical: { 
        field: 'confirmPassword', 
        message: 'The password and its confirm are not the same' 
       } 
      } 
     }, 
     confirmPassword: { 
      validators: { 
       notEmpty: { 
        message: 'The confirm password is required and can\'t be empty' 
       }, 
       identical: { 
        field: 'password', 
        message: 'The password and its confirm are not the same' 
       } 
      } 
     } 
    } 
}); 
}); 
</script> 
</body> 
</html> 
</pre>

content.html：

<div class="container" style="margin-top: 50px;"> 
    <div class="row"> 
     <div class="col-lg-4 col-lg-offset-4"> 
      <div class="panel panel-default"> 
       <div class="panel-heading"> 
        <h3 class="panel-title">Sign up</h3> 
       </div> 

       <div class="panel-body"> 
        <form id="defaultForm" method="post"> 
         <div class="form-group"> 
          <input type="text" class="form-control" name="username" placeholder="Username" /> 
         </div> 

         <div class="form-group"> 
          <input type="text" class="form-control" name="email" placeholder="Email" /> 
         </div> 

         <div class="form-group"> 
          <input type="password" class="form-control" name="password" placeholder="Password" /> 
         </div> 

         <div class="form-group"> 
          <input type="password" class="form-control" name="confirmPassword" placeholder="Retype password" /> 
         </div> 

         <div class="form-group"> 
          <button type="submit" class="btn btn-primary">Sign up</button> 
         </div> 
        </form> 
       </div> 
      </div> 
     </div> 
    </div> 
</div>

在這個例子中bootstrapvalidator不起作用。我需要做什麼，它在ajax請求中工作？

任何想法？

來源

2014-07-05 dermold

使用AJAX查詢加載內容時，需要等待該內容出現在DOM中之前需要等待的時間窗口。您可以捕獲時的內容完全是通過分配一個回調函數加載的事件：

$("#result").load("content.html", function() { 
    // attach validation to the form here 
    $("#defaultForm").bootstrapValidator({ 
     // ... 
    }); 
});

這樣，bootstrapValidator功能將被分配後的內容被加載，而不是之前。

請參閱此處的加載說明文件：http://api.jquery.com/load/

來源

2014-07-31 14:50:11

ajax加載內容中的bootstrapvalidator

回答

相關問題