[英]jquery validation is not working with templates inside ng view
我只是使用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验证,还是应该使用角度验证?
我在AngularJS和jQuery Validation Plugin之间创建了一个桥梁。 它使用单个指令ng-validate
验证表单,该指令自动检测DOM何时就绪。 它还使您能够在控制器内定义验证选项(规则,消息等),因此您无需为每个表单创建新指令。
试一试: https : //github.com/jpkleemans/angular-validate 。 反馈非常感谢!
将其移动到指令中,例如将其放在表单上。
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() {
...
});
}
}
});
让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();
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.