AngularJS + Bootstrap - 验证文本框 - 如何在用户输入某些数据后才显示验证反馈? [英] AngularJS + Bootstrap - Validating Text Box - how to show validation feedback only after the user has entered some data?
问题描述
我正在对文本框进行一些验证。用户输入有效输入后,文本框应变为绿色,并在最右侧角出现刻度标记。同样,如果用户输入的数据无效,则文本框应该变为红色,而应显示十字形。
为此,我使用的是bootstrap的'` has-error has-feedback
'`和`' has-success has-feedback
'` CSS
类。
我的问题是文本框是绿色的,即使第一次加载页面也有勾选。我需要验证反馈才会在用户输入输入后出现。当表单用于编辑现有记录时,同样适用。我怎样才能做到这一点? (我不确定我是否可以使用` $ dirty
`和' $ pristine
`来解决这个问题)
以下是我的标记。
I am doing some validation on text boxes. Once the user enters a valid input, the text box should become green and a tick mark should appear at the rightmost corner. Similarly, if the user has entered an invalid data, text box should become red and a cross should appear instead.
For this, I'm using bootstrap's '`has-error has-feedback
'` and `'has-success has-feedback
'` CSS
classes.
My problem is that the textbox is green and has a tick even when the page is loaded for the first time. I need the validation feedback to appear only after the user has entered an input. And the same applies when the form is used to edit the existing records. How can I achieve this ? (I'm not sure if I could use `$dirty
` and '$pristine
` to solve this problem)
Below is my Markup.
<div class="form-group" ng-class="(Form.emailAddress.$valid) ? 'has-success has-feedback': 'has-error has-feedback'">
<label for="emailAddress">Email address</label>
<span ng-show="!Form.emailAddress.$valid">Please enter a valid address</span>
<input type="email" class="form-control" id="emailAddress" name="emailAddress" ng-model="Data.emailAddress" ng-pattern="validationPattern" ng-maxlength="20">
<span ng-show="Form.emailAddress.$valid" class="glyphicon glyphicon-ok form-control-feedback"></span>
<span ng-show="!Form.emailAddress.$valid" class="glyphicon glyphicon-remove form-control-feedback"></span>
</div>
我也试过
I also tried
<div ng-class="(contactDetailsForm.emailAddress.$valid) && contactDetailsForm.emailAddress.$dirty ? 'has-success has-feedback': 'has-error has-feedback'">
但是当页面加载时文本框默认变为红色。
关于这个主题的更多问题。
我想检查电子邮件的最大长度,如果超过20,我想显示不同的消息。我试过 Form.emailAddress。$ maxlength
但无法使其正常工作。是否 maxlength
处理'电子邮件
'类型为好吧?
如何在用户移动到下一个文本框后显示反馈而不是在输入时显示它?可能类似于jquery的' focusout()
'。
我在控制器中使用了验证模式,因为电子邮件不是必填字段,但是输入它必须是有效的。我能否知道有没有比这更好的方法?
任何帮助p将非常感激。谢谢
but then the textbox becomes red by default when the page is loaded.
A few more questions regarding this topic.
I would like to check the maxlength of the email as well, and if it exceeds 20, I would want to show a different message. I tried Form.emailAddress.$maxlength
but couldn't get it working. Does it maxlength
work on 'email
' types as well ?
How can I show the feedback after the user moves to the next textbox instead of showing it while typing ? May be something similar to jquery's 'focusout()
'.
I've used a validation pattern in the controller because email is not a required field, but when entered it has to be valid. Could I please know if there are better ways than doing this ?
Any help would be much appreciated. Thanks
推荐答案
脏`和'
dirty` and '
pristine `解决这个问题)
以下是我的标记。
pristine` to solve this problem)
Below is my Markup.
<div class="form-group" ng-class="(Form.emailAddress.
有效)?'has-success has-feedback':'has-error has-feedback' > ;
< label = ema ilAddress > 电子邮件地址< / label >
< span ng-show = !Form.emailAddress。
valid) ? 'has-success has-feedback': 'has-error has-feedback'"> <label for="emailAddress">Email address</label> <span ng-show="!Form.emailAddress.
这篇关于AngularJS + Bootstrap - 验证文本框 - 如何在用户输入某些数据后才显示验证反馈?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!