编辑:
我已经添加了一个JSFIDDLE,因此您可以轻松进行故障排除,而不必自己设置环境。如您所见,在input
元素上的blur
事件之前,在电子邮件字段上进行了验证,该元素是由$scope.Email
触发的。如果您在<p>
元素上评论ng-show="!mainForm.validate()"
,您会发现问题不会发生。
我正在使用jQuery Validate的角度实现,并且我需要检查表单是否有效而无需显示错误消息。我在线看到的标准解决方案是使用jQuery Validate的checkForm()
函数,例如:
$('#myform').validate().checkForm()
但是,我正在使用的角包装器当前未实现checkForm
功能。我一直在尝试修改源代码以将其引入,恐怕我会陷入困境。代码很小且简单,我会在这里粘贴它:
(function (angular, $) {
angular.module('ngValidate', [])
.directive('ngValidate', function () {
return {
require: 'form',
restrict: 'A',
scope: {
ngValidate: '='
},
link: function (scope, element, attrs, form) {
var validator = element.validate(scope.ngValidate);
form.validate = function (options) {
var oldSettings = validator.settings;
validator.settings = $.extend(true, {}, validator.settings, options);
var valid = validator.form();
validator.settings = oldSettings; // Reset to old settings
return valid;
};
form.numberOfInvalids = function () {
return validator.numberOfInvalids();
};
//This is the part I've tried adding in.
//It runs, but still shows error messages when executed.
//form.checkForm = function() {
// return validator.checkForm();
//}
}
};
})
.provider('$validator', function () {
$.validator.setDefaults({
onsubmit: false // to prevent validating twice
});
return {
setDefaults: $.validator.setDefaults,
addMethod: $.validator.addMethod,
setDefaultMessages: function (messages) {
angular.extend($.validator.messages, messages);
},
format: $.validator.format,
$get: function () {
return {};
}
};
});
}(angular, jQuery));
我希望能够使用它显示或隐藏一条消息,例如:
<p class="alert alert-danger" ng-show="!mainForm.checkForm()">Please correct any errors above before saving.</p>
我不仅使用!mainForm.validate()
的原因是因为这会导致错误消息在"模糊"之前显示在元素上。远离,这是我要避免的。谁能帮助我将checkForm()
函数实现到此角指令中?
您可以在插件中添加checkform()函数。
(function (angular, $) {
angular.module('ngValidate', [])
.directive('ngValidate', function () {
return {
require: 'form',
restrict: 'A',
scope: {
ngValidate: '='
},
link: function (scope, element, attrs, form) {
var validator = element.validate(scope.ngValidate);
form.validate = function (options) {
var oldSettings = validator.settings;
validator.settings = $.extend(true, {}, validator.settings, options);
var valid = validator.form();
validator.settings = oldSettings; // Reset to old settings
return valid;
};
form.checkForm = function (options) {
var oldSettings = validator.settings;
validator.settings = $.extend(true, {}, validator.settings, options);
var valid = validator.checkForm();
validator.submitted = {};
validator.settings = oldSettings; // Reset to old settings
return valid;
};
form.numberOfInvalids = function () {
return validator.numberOfInvalids();
};
}
};
})
.provider('$validator', function () {
$.validator.setDefaults({
onsubmit: false // to prevent validating twice
});
return {
setDefaults: $.validator.setDefaults,
addMethod: $.validator.addMethod,
setDefaultMessages: function (messages) {
angular.extend($.validator.messages, messages);
},
format: $.validator.format,
$get: function () {
return {};
}
};
});
}(angular, jQuery));
请在此处找到更新的JSFIDDLE
参考:jQuery验证:呼叫有效而无需显示错误?
如果我正确理解您的问题,您希望在电子邮件adress无效时能够显示错误消息,并且您决定要显示错误消息。
您可以通过将输入类型设置为<input type=email>
Angular将属性添加到表格$valid
上,因此您可以在已提交的文本有效的情况下检查控制器。因此,我们只需要在控制器中访问此变量并将其倒置。(因为我们想显示错误时显示错误)
$scope.onSubmit = function() {
// Decide here if you want to show the error message or not
$scope.mainForm.unvalidSubmit = !$scope.mainForm.$valid
}
我还添加了一个在提交时使用浏览器验证的提交按钮。这样,onSubmit
功能甚至都不会被调用,并且浏览器将显示错误。这些方法除了Angularjs之外不需要任何东西。您可以在此处检查更新的JSFIDDLE
确保打开控制台,以查看何时调用onSubmit
函数,并在按下按钮时发送什么值。
您可以使用 $ thoused ,这是一旦集中到模糊的字段。
。 <p class="alert alert-danger" ng-show="mainForm.Email.$touched && !mainForm.validate()">Please correct any errors above before saving.</p>
您可以使用ng-show="mainForm.Email.$invalid && mainForm.Email.$touched"
到<p>
TAG
默认情况下mainForm.Email.$touched
是false
,在Blur上它将更改为true
为了正确验证,将<input>
标签类型更改为电子邮件
如果您不想在编辑输入标签时显示错误消息,则可以添加ng-keydown="mainForm.Email.$touched=false"
我不使用angular-validate.js插件
<div ng-app="PageModule" ng-controller="MainController" class="container"><br />
<form method="post" name="mainForm" ng-submit="OnSubmit(mainForm)" >
<label>Email:
<input type="email" name="Email" ng-keydown="mainForm.Email.$touched=false" ng-model="Email" class="email" />
</label><br />
<p class="alert alert-danger" ng-show="mainForm.Email.$invalid && mainForm.Email.$touched">Please correct any errors above before saving.</p>
<button type="submit">Submit</button>
</form>
</div>
更新的代码:jsfiddle
angularjs形成验证
有关角验证的更多信息
更新2
CheckForm将返回表格是有效还是无效
// added checForm, also adds valid and invalid to angular
form.checkForm = function (){
var valid = validator.form();
angular.forEach(validator.successList, function(value, key) {
scope.$parent[formName][value.name].$setValidity(value.name,true);
});
angular.forEach(validator.errorMap, function(value, key) {
scope.$parent[formName][key].$setValidity(key,false);
});
return valid
}
隐藏默认消息,由jQuery验证插件添加到摘要下方添加到$.validator.setDefaults
app.config(function ($validatorProvider) {
$validatorProvider.setDefaults({
errorPlacement: function(error,element) { // to hide default error messages
return true;
}
});
});
这是修改的插件看起来像
(function (angular, $) {
angular.module('ngValidate', [])
.directive('ngValidate', function () {
return {
require: 'form',
restrict: 'A',
scope: {
ngValidate: '='
},
link: function (scope, element, attrs, form) {
var validator = element.validate(scope.ngValidate);
var formName = validator.currentForm.name;
form.validate = function (options) {
var oldSettings = validator.settings;
validator.settings = $.extend(true, {}, validator.settings, options);
var valid = validator.form();
validator.settings = oldSettings; // Reset to old settings
return valid;
};
form.numberOfInvalids = function () {
return validator.numberOfInvalids();
};
// added checkForm
form.checkForm = function (){
var valid = validator.form();
angular.forEach(validator.successList, function(value, key) {
scope.$parent[formName][value.name].$setValidity(value.name,true);
});
angular.forEach(validator.errorMap, function(value, key) {
scope.$parent[formName][key].$setValidity(key,false);
});
return valid
}
}
};
})
.provider('$validator', function () {
$.validator.setDefaults({
onsubmit: false // to prevent validating twice
});
return {
setDefaults: $.validator.setDefaults,
addMethod: $.validator.addMethod,
setDefaultMessages: function (messages) {
angular.extend($.validator.messages, messages);
},
format: $.validator.format,
$get: function () {
return {};
}
};
});
}(angular, jQuery));
控制器
app.controller("MainController", function($scope) {
$scope.Email = "";
$scope.url = "";
$scope.isFormInValid = false; // to hide validation messages
$scope.OnSubmit = function(form) {
// here you can determine
$scope.isFormInValid = !$scope.mainForm.checkForm();
return false;
}
})
需要在每个输入标签上进行关注(示例电子邮件)
ng-show="isFormInValid && !mainForm.Email.$invalid "
如果表格和电子邮件都无效,则显示验证消息。
jsfiddle
尝试此代码进行验证这是表格
<form name="userForm" ng-submit="submitForm(userForm.$valid)" novalidate>
<div class="form-group">
<input type="text" ng-class="{ 'has-error' : userForm.name.$invalid && !userForm.name.$pristine }" ng-model="name" name="name" class="form-control" placeholder="{{ 'regName' | translate }}" required>
<p ng-show="userForm.name.$invalid && !userForm.name.$pristine" class="help-block">Your name is required.</p>
</div>
<div class="form-group">
<input type="tel" ng-class="{ 'has-error' : userForm.mob.$invalid && !userForm.mob.$pristine }" ng-model="mob" class="form-control" name="mob" ng-maxlength="11" ng-minlength="11" ng-pattern="/^d+$/" placeholder="{{ 'regPhone' | translate }}" required>
<p ng-show="userForm.mob.$invalid && !userForm.mob.$pristine" class="help-block">Enter a valid number</p>
</div>
<div class="form-group">
<input type="email" ng-model="email" name="email" class="form-control" placeholder="{{ 'regEmail' | translate }}" required>
<p ng-show="userForm.email.$invalid && !userForm.email.$pristine" class="help-block">Enter a valid email.</p>
</div>
<div class="form-group">
<input type="password" ng-model="pass" name="pass" class="form-control" placeholder="{{ 'regPass' | translate }}" minlength="6" maxlength="16" required>
<p ng-show="userForm.pass.$invalid && !userForm.pass.$pristine" class="help-block"> Too short Min:6 Max:16</p>
<input type="password" ng-model="repass" class="form-control" ng-minlength="6" placeholder="{{ 'regConPass' | translate }}" ng-maxlength="16" required>
</div>
<button class="loginbtntwo" type="submit" id="regbtn2" ng-disabled="userForm.$dirty && userForm.$invalid" translate="signUp" ></button>
</form>
您需要稍微修改Angular Validate插件。这是JSFiddle中代码的工作版本。注意更新的插件代码以及对原始代码的一对修改。
更新的插件代码只需将其添加到validator.setDefaults参数:
errorPlacement: function(error,element) { return true; } // to hide default error message
然后,我们使用范围变量隐藏/显示自定义错误消息:
$scope.OnSubmit = function(form) {
if (form.$dirty) {
if (form.validate()) {
//form submittal code
} else {
$scope.FormInvalid = true;
}
}