Question

我只是使用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验证，还是应该使用角度验证？

Answer 1

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

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

Answer 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而不会延迟（稍微简化）放置在rending引擎之后的浏览器事件队列末尾的操作：

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() {

        ...

      });
    }
  }
});

Answer 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();  
});

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

3 个答案: