使用角度 ng-repeat 对动态创建的输入进行 Jquery 验证 [重复]答案

【问题标题】：Jquery validation on dynamically created inputs using angular ng-repeat [duplicate]使用角度 ng-repeat 对动态创建的输入进行 Jquery 验证 [重复]
【发布时间】：2014-10-22 23:32:09
【问题描述】：

我正在使用 jQuery 验证库来验证我使用 Angular.JS 创建的表单。我可以在表单中的所有静态/已知输入字段上添加验证。

除了修复输入之外，我还将在表单中提出一些动态问题。这些问题将使用ng-repeat 指令呈现。

只有当输入控件的id 和name 已知时，我才能验证输入。在动态控制的情况下，我们无法预测相同。

HTML 代码：

<body>
    <div ng-controller="PersonController">
        <div ng-repeat="social in formData.socials">
            <ng-form name="urlForm">
                  <input type="url" name="socialUrl" ng-model="social.url">
                  <span class="alert error" ng-show="urlForm.socialUrl.$error.url">URL error</span>
            </ng-form>
        </div> 
        <hr>

        <form id="contact-form">
          <div class="control-group">
            <label class="control-label" for="email">Email Address</label>
            <div class="controls">
                <input type="text" name="email" id="email" placeholder="Your email address">
            </div>
          </div>
          <br/>
          <div ng-repeat="question in Questions">
            <label class="control-label" for="email">{{question.Title}}</label>
            <div class="controls">
              <input name="question">
            </div>
            <br/>
          </div> 
        </form>
    </div>

</body>

我已经检查了使用ng-form 元素验证动态输入控件的方法。但我只想使用 jQuery 验证来验证表单，因为我将使用 jQuery 引导弹出框，它只能与 jQuery 验证一起使用。

Javascript：

angular.module('directive', []).controller('PersonController', function personController($scope) {
    $scope.loading = false;
    $scope.formData = {
        socials: [{
            url: 'http://www.valid.com'},
        {
            url: 'invalid url'}]
    };

    $scope.Questions = [
            { "Title": "Whats your name?", "Type": "Text" },
            { "Title": "Whats your birthdate?", "Type": "Date" }
        ];

    $(document).ready(function () {

      $('#contact-form').validate({
          rules: {
              email: {
                  required: true,
                  email: true
              }
          },
          highlight: function (element) {
              $(element).closest('.control-group').removeClass('success').addClass('error');
          },
          success: function (element) {
              element.text('OK!').addClass('valid')
                  .closest('.control-group').removeClass('error').addClass('success');
          }
      });

    });

});

请参考：http://plnkr.co/edit/3jiYucTKOlW4G0TISFNj?p=preview

如何为动态元素添加 jQuery 验证规则？请帮帮我。提前致谢。

【问题讨论】：

我不太明白你在问这个问题“如何为动态元素添加 jQuery 验证规则？”给出 jQuery 验证规则示例，以及您要访问的动态元素的哪一部分？姓名？ ID？输入？

标签： jquery angularjs jquery-validate angular-ui-bootstrap

【解决方案1】：

我不知道您为什么要对 angularJs 进行 jQuery 验证。 Angular 内置了对表单验证的支持，这为您的开发提供了更大的灵活性。请参考文档（https://docs.angularjs.org/guide/forms）

【讨论】：

正如我在问题中所说，我将使用 jQuery bootstrap popover。这符合 jQuery 验证