仅在提交或用户输入时验证表单字段
[英] Validate form field only on submit or user input
本文介绍了仅在提交或用户输入时验证表单字段的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我有使用 required
验证的表单字段.问题是,在呈现表单时会立即显示错误.我希望它仅在用户实际输入文本字段或提交后显示.
我该如何实施?
解决方案
使用 $dirty
标志仅在用户与输入交互后才显示错误:
<input type="email" name="email" ng-model="user.email" required/><span ng-show="form.email.$dirty && form.email.$error.required">电子邮件是必需的</span>
如果您只想在用户提交表单后触发错误,则可以使用单独的标志变量,如下所示:
<div><button type="submit">提交</button>
</表单>
function MyCtrl($scope){$scope.submit = function(){//将已提交"标志设置为真$scope.submitted = true;//将表单发送到服务器//$http.post ...}};
然后,如果 ng-show
expression 中的所有 JS 对您来说看起来太多了,您可以将其抽象为一个单独的方法:
function MyCtrl($scope){$scope.submit = function(){//将已提交"标志设置为真$scope.submitted = true;//将表单发送到服务器//$http.post ...}$scope.hasError = 函数(字段,验证){如果(验证){return ($scope.form[field].$dirty && $scope.form[field].$error[validation]) ||($scope.submitted && $scope.form[field].$error[validation]);}return ($scope.form[field].$dirty && $scope.form[field].$invalid) ||($scope.submitted && $scope.form[field].$invalid);};};
<div><button type="submit">提交</button>
</表单>
I have form fields that are validated using required
. The problem is, that the error is displayed immediately when the form is rendered. I want it only to be displayed after the user actually typed in the text field, or on submit.
How can I implement this?
解决方案
Use $dirty
flag to show the error only after user interacted with the input:
<div>
<input type="email" name="email" ng-model="user.email" required />
<span ng-show="form.email.$dirty && form.email.$error.required">Email is required</span>
</div>
If you want to trigger the errors only after the user has submitted the form than you may use a separate flag variable as in:
<form ng-submit="submit()" name="form" ng-controller="MyCtrl">
<div>
<input type="email" name="email" ng-model="user.email" required />
<span ng-show="(form.email.$dirty || submitted) && form.email.$error.required">
Email is required
</span>
</div>
<div>
<button type="submit">Submit</button>
</div>
</form>
function MyCtrl($scope){
$scope.submit = function(){
// Set the 'submitted' flag to true
$scope.submitted = true;
// Send the form to server
// $http.post ...
}
};
Then, if all that JS inside ng-show
expression looks too much for you, you can abstract it into a separate method:
function MyCtrl($scope){
$scope.submit = function(){
// Set the 'submitted' flag to true
$scope.submitted = true;
// Send the form to server
// $http.post ...
}
$scope.hasError = function(field, validation){
if(validation){
return ($scope.form[field].$dirty && $scope.form[field].$error[validation]) || ($scope.submitted && $scope.form[field].$error[validation]);
}
return ($scope.form[field].$dirty && $scope.form[field].$invalid) || ($scope.submitted && $scope.form[field].$invalid);
};
};
<form ng-submit="submit()" name="form">
<div>
<input type="email" name="email" ng-model="user.email" required />
<span ng-show="hasError('email', 'required')">required</span>
</div>
<div>
<button type="submit">Submit</button>
</div>
</form>
这篇关于仅在提交或用户输入时验证表单字段的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!