2014-09-25 85 views
0

我是AngularJS的新手。我正在使用引導驗證器來驗證我的項目中的表單。這是工作的罰款,直到我下面的代碼添加到我的控制器進行驗證的JavaScript文件:無法在AngularJS中讀取未定義錯誤的屬性'childNodes'

$(document).ready(function() { 
      $('#searchProducts').bootstrapValidator({ 
       message: 'This value is not valid', 
       feedbackIcons: { 
        valid: 'glyphicon glyphicon-ok', 
        invalid: 'glyphicon glyphicon-remove', 
        validating: 'glyphicon glyphicon-refresh' 
       }, 
       fields: { 
        keyword: { 
         message: 'The productname is not valid', 
         validators: { 
          notEmpty: { 
           message: 'The productname is required and cannot be empty' 
          }, 
          stringLength: { 
           min: 6, 
           message: 'The productname must be more than 6 and less than 30 characters long' 
          }, 
          regexp: { 
           regexp: /^[a-zA-Z0-9_]+$/, 
           message: 'The productname can only consist of alphabetical, number and underscore' 
          } 
         } 
        }, 

       } 
      }); 
     }); 

我已經包含了以下在我的母版頁的JavaScript文件的建議here

<script src="~/scripts/angular.js"></script> 
    <script src="~/scripts/angular-route.js"></script> 
    <script src="~/scripts/angular-route.min.js"></script> 
    <script src="~/scripts/jquery-2.1.1.min.js"></script> 
    <script src="~/scripts/angular-ui/ui-bootstrap.min.js"></script> 
    <script src="~/scripts/angular-ui/ui-bootstrap-tpls.js"></script> 
    <script src="~/scripts/angular-ui/ui-bootstrap-tpls.min.js"></script> 
    <script src="~/scripts/angular-local-storage.min.js"></script> 
    <script src="~/bootstrapvalidator/dist/js/bootstrapValidator.js"></script> 

它給了我錯誤「無法讀取屬性'childNodes'未定義」在我的代碼在主頁面上:

<div class="container-fluid" style="margin: 0 20px;"> 
     <div class="row"> 
      <div data-ng-view="" class="main"></div> 
     </div> 
    </div> 

我在做什麼錯? 謝謝。

+0

使用jQuery /引導驗證的單行小例子是出了什麼問題... – Endless 2014-09-25 18:38:14

+0

的http:// scotch.io/tutorials/javascript/angularjs-form-validation – DeadCalimero 2014-09-25 18:40:56

+0

是的,但我看到它在[bootstrapvalidator](http://bootstrapvalidator.com/)中工作。我不能在我的項目中使用它嗎? – mpatel 2014-09-25 18:41:40

回答

0

這裏的角度驗證如何工作沒有JavaScript代碼

<script src="https://code.angularjs.org/1.2.25/angular.js"></script> 
 

 
<div ng-app> 
 
    <form name="myForm"> 
 
    search: <input type="search" ng-pattern="" required ng-model="searchTerm" name="query" ng-maxlength="30" ng-minlength="6"> 
 
    <div ng-if="myForm.$invalid && myForm.$dirty"> 
 
     The productname is not valid<br> 
 

 
     <span class="error" ng-show="myForm.query.$error.minlength"> 
 
     The productname must be more than 6 
 
     </span> 
 

 
     <span class="error" ng-show="myForm.query.$error.maxlength"> 
 
     The productname must be less than 30 characters long 
 
     </span> 
 

 
     <span class="error" ng-show="myForm.query.$error.required"> 
 
     The productname is required and cannot be empty 
 
     </span> 
 
    </div> 
 

 
    </form> 
 
</div>

相關問題