jquery 验证不适用于 ng 视图中的模板答案

【问题标题】：jquery validation is not working with templates inside ng viewjquery 验证不适用于 ng 视图中的模板
【发布时间】：2014-07-05 15:01:45
【问题描述】：

我只是使用 JQuery 验证来验证这个简单的表单

<form id="getting-started-form">
<label>Name</label>
<input type="text" id="txt-name" name="name" />

<br />
<label>Email</label>
<input type="text" id="txt-email" name="email" />

<button type="submit">Validate</button>
</form>

如果此表单未包含在 ng 视图中，则验证工作正常，但是当我使用 ng 路由检索此模板时，验证无法使用相同的表单。

这是我的简单 HTML 页面

<!DOCTYPE html>
<html data-ng-app="ngViewValidate">
<head>
<title></title>
</head>
<body>

<div data-ng-view="">
</div>

<br />
<a href="#/ValidationTmpl">Go to validation template </a>
</body>
<script src="../Scripts/angularjs.js"></script>
<script src="../Scripts/angular-route.js"></script>
<script src="../Scripts/jquery-2.0.2.js"></script>
<script src="../Scripts/jquery.validate.js"></script>
<script src="../Scripts/jquery.validate.unobtrusive.js"></script>
<script src="JQueryValidateWithNgView.js"></script>
</html>

这是我的 java 脚本文件 JqueryValidateWithNgView

var ngViewValidate = angular.module('ngViewValidate', ['ngRoute']);

ngViewValidate.config(function ($routeProvider , $locationProvider) {

$routeProvider.when('/ValidationTmpl',
    {
        templateUrl: '/WithAngular/ValidationTmpl.html'
    })
})

$('#getting-started-form').validate({

rules: {
    name: {
        required: true
    },
    email: {
        required: true
    }
},
submitHandler: function (form) {
    console.log('Valid');
},
invalidHandler: function (event, validator) {
    console.log('InValid');
}
})

问题是我可以使用任何解决方法在 ng 视图中使用 JQuery 验证和模板，还是应该使用角度验证？

【问题讨论】：

我学到的。您不能将 jquery 用于 ng-view。
在这种情况下，如何使用 JQuery 验证进行 ng 视图？
这是因为您在 ng-view 渲染之前运行了 .validate()。查看创建指令，不要忘记包含$timeout
那么在 ng-view 中渲染 HTML 模板后有什么方法可以调用 .validate() 吗？

标签： jquery angularjs validation jquery-validate ngroute

【解决方案1】：

我在 AngularJS 和 jQuery Validation Plugin 之间架起了一座桥梁。它使用单个指令 ng-validate 验证表单，该指令自动检测 DOM 何时准备就绪。它还使您能够在控制器中定义验证选项（规则、消息等），因此您不必为每个表单创建新指令。

试一试：https://github.com/jpkleemans/angular-validate。非常感谢您的反馈！

【讨论】：

【解决方案2】：

将其移动到指令中，例如放在表单上。

HTML：

<form id="getting-started-form" j-validate>

JS：

ngViewValidate.directive('jValidate', function() {

  return {
    link: function(scope, element, attr) {

      element.validate({

        rules: {
          name: {
            required: true
          },
          email: {
            required: true
          }
        },
        submitHandler: function(form) {
          console.log('Valid');
        },
        invalidHandler: function(event, validator) {
          console.log('InValid');
        }
      });

      scope.$on('$destroy', function () {
        // Perform cleanup.
        // (Not familiar with the plugin so don't know what should to be done)
      });
    }
  }
});

演示： http://plnkr.co/edit/cjQH7dl3vHGzgaA9OHOy?p=preview

根据您要放入指令中的逻辑，例如，如果您需要额外的 jQuery 插件来在绑定之前修改表单，您可以使用 $timeout 毫不拖延地（有点简化）将操作放在渲染引擎后浏览器事件队列的结束：

ngViewValidate.directive('jValidate', function($timeout) {

  return {
    link: function(scope, element, attr) {

      $timeout(function () {

        element.validate({

          ...

        });
      });

      scope.$on('$destroy', function() {

        ...

      });
    }
  }
});

或者，您可以使用$evalAsync 在 Angular 操作 DOM 之后（例如通过其他指令）执行逻辑，但在浏览器呈现它之前：

ngViewValidate.directive('jValidate', function() {

  return {
    link: function(scope, element, attr) {

      scope.$evalAsync(function () {

        element.validate({

          ...

        });
      });

      scope.$on('$destroy', function() {

        ...

      });
    }
  }
});

【讨论】：

非常感谢您的支持

【解决方案3】：

让 tis 工作的最简单方法是

   $scope.$on('$viewContentLoaded', function (event) {


            var currentForm = $('#frmCreateForm');
            currentForm.removeData("validator");
            currentForm.removeData("unobtrusiveValidation");
            $.validator.unobtrusive.parse(currentForm);
            //currForm.validate();
            var validator = currentForm.validate();  
});

【讨论】：