Question

我是AngularJS的新手。我正在使用bootstrap验证器来验证我的项目中的表单。它工作正常，直到我将以下代码添加到我的控制器javascript文件进行验证：

$(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'
                            }
                        }
                    },

                }
            });
        });

我已按照建议的here

在我的母版页中包含以下javascript文件

<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>

我做错了什么？感谢。

Answer 1

以下是角度验证如何在没有单行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>

无法阅读属性＆＃39; childNodes＆＃39; AngularJS中未定义的错误

1 个答案: