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 using
<div ng-class="(contactDetailsForm.emailAddress.$valid) &&
contactDetailsForm.emailAddress.$dirty ? 'has-success has-feedback':
'has-error has-feedback'">
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
--
You received this message because you are subscribed to the Google Groups
"AngularJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at http://groups.google.com/group/angular.
For more options, visit https://groups.google.com/groups/opt_out.
