I have searched and followed the angular code for a long time and cant find where this error message is coming from. I know the validation works but my code only has this:
<span class="error" ng-show="myForm.input.$error.required">
Required!</span>
<span class="error" ng-show="myForm.input.$error.email">
Not valid email!</span></br>
but this error comes up:
I cant even find where a concatenation might produce this. The word "Please" is not even in the angular code.
The browser is generating this message, because of HTML5 support of "type='email'".
you can add 'novalidate' in form to disable native HTML5 validation.
<form name="form" class="css-form" novalidate>
This is due to HTML5. If you don't want to show these messages, add the following to your css:
::-webkit-validation-bubble-message { display: none; }
However, at the moment this only works for WebKit implementations (Chrome).
More info
Related
I'm trying to learn forms in AngularJS 1.x. But I have error messages that are always on when it first loads. How to develop behaviour such that they are blank on load, and only red after a submit if fields were not entered? Seems to be a few states I have to use the built-in directives for.
All the elements are similar so let's just take apart this bit. Also if different for a radio and dropdown list maybe we can discuss that too.
<p>First Name:<input type="text" id="firstName" ng-model="firstName" required/>
<span style="background-color: red" ng-if="identification.firstName.$error.required">The first name is required.</span>
</p>
Do I chain a few directives with || or && ?
Behaviour I'm aiming for
How to keep the error messages off when it loads?
when I hit submit, and a field is blank, will it then activate the css red error messages?
I'd like the error messages to clear as I fill in the form without reloading.
Yeah, so any tips greatly appreciated. Doesn't have to be particularly pretty
Thanks
UPDATE 1
gist of current code
Well I took a stab at it. Still really a hot mess at this point. Don't know how to use submit to test for each field and then display the error message if blank. Also seems like a lot of duplication on the testing of field states. Is there a better way to break up that logic? Ugggghhhhh
UPDATE 2
This one's weird, the form now has all text boxes not buttons or checkboxes!? But the HTML hasn't changed. Sigh
ng-if="identification.firstName.$error.required && !$pristine"
Go search more on $pristine and $dirty validator
You can add some other property to your ng-if and set its value to true only when form is submitted.
in your html add this new property
<p>First Name:<input type="text" id="firstName" ng-model="firstName" required/>
<span style="background-color: red" ng-if="identification.firstName.$error.required && running">The first name is required.</span>
</p>
in your controller set this property to true when form is submitted
$scope.submit = function(){
$scope.running = true;
...
}
I am using angularjs and trying to make the website accessible. When a user doesn't enter or forget to enter into required field, jaws doesn't read out the error message. I have tried adding role="alert" to the div but it doesn't seem to like it. Any suggestions
<div aria-type-label="{{'some:error'}}">
<span role="alert" class="error-message">Error</span>
</div>
Jaws and the browser are looking for updated content to alert so I found that I had to add and remove the data completely in order to get the alerts to work consistently. For example, I had the text removed when the error would go away, and had the text placed back in once there was an error. This can be done in a couple ways. One, using an ng-if={{error}} then the HTML will get removed from the DOM if there is no error, and put back into the DOM once there is an error.
The other way is to set an errorMessage value to either an empty string when there is no error, or an error message when there is an error. That way the text in the DOM is actually changing, resulting in an alert.
Possible example using both methods mentioned:
<input name="theTextInput" type="text" ng-model="filled" placeholder="Add something"/>
<div role="alert" ng-if="filled" aria-type-label="">
<span class="error-message">{{message}}</span>
</div>
<span class="sr-only" style="display: none;">{{message = "Has Error"}}</span>
Plunker
NOTE: This worked in Chrome in October 2016 and November 2016, but today it looks like it's not alerting at the moment. Still works in Firefox.
You have to use aria-described by and role alert together.
Please have a look:
<input type="textbox" id="yourField" aria-describedby="yourFieldError">
<span role="alert" data-bind="visible:yourCondition" class="error-message" id="yourFieldError">Error</span>
Hope it will help.
if I provoke 'min-length' error and then try to provoke 'required' error, the latter isn't shown, although the input is underlined in red.
<md-input-container class="md-block">
<label for="register_password">Password</label>
<input required minlength="6" maxlength="100" type="password" name="register_password" id="register_password" ng-model="registerData.password">
<div ng-messages="registerForm.register_password.$error">
<div ng-message="maxlength">The password should be shorter</div>
<div ng-message="minlength">The password should be at least 6 characters long</div>
<div ng-message="required">Required</div>
</div>
</md-input-container>
Full working example:
http://codepen.io/AndriusRimkus/pen/mPEjYX
Thanks!
You should use the following code
<md-input-container class="md-block">
<label for="register_password">Password</label>
<input required minlength="6" md-maxlength="100"
type="password" name="register_password"
id="register_password" ng-model="registerData.password">
<div ng-messages="registerForm.register_password.$error">
<div ng-message-exp="['required', 'minlength']">
The password shold be at least 6 characters long</div>
<!-- <div ng-message="minlength">The password should be at least 6 characters long</div> -->
<div ng-message="md-maxlength">The password should be shorter</div>
</div>
</md-input-container>
So there are many things you should consider. Since you are using angular material design I think you should use md-maxlength which will show a hint for how many charcters written against maxlength. I am not sure if there is any md-minlength directive is available. Now require and minlength is kind of same thing so I think you should combine those two as a single error message. Now There are some specific things releated to [ngMessages][1] check the documentaion for detail explation. I'll say couple of things about that. By default ngMessges only displays one error message and if there are more than 1 error message are valid then which ever comes first in DOM will be displayed. you can use multiple or ng-messages-multiple to display more than 1 error messages. I suggest you should write you error in incrementing order like required first followed by minlength(If you want to display it seperately) and at the end md-maxlength. You can use ng-message-exp to combine more than 1 error codes.
Your code is correct but there is one point.
You are using an old version of AngularJS Material.
If You change the last script with this lines then your code will be run properly.
<!-- Angular Material Library -->
<!-- Version 1.1.4 -->
<script src="https://material.angularjs.org/latest/angular-material.min.js"></script>
Check online
Good Luck
I'm building a simple form using AngularJS Messages.
Basically what I want to happen is:
User submits form, all appropriate errors show and prevents
submission
User then completes fields and errors hide one by one after 'focus out' of field ($touched ?)
First point is working fine but I can't figure out the second part, I can't hide the error messages at all afterwards. I'm sure I'm missing something simple but other related questions aren't really helping too much.
Any ideas?
<form name="orderForm"
ng-submit="orderForm.$valid && placeOrder()" novalidate>
<input type="text"
ng-model="orderParams.delivery_address.full_name"
name="fullName" required />
<p ng-message="orderForm.fullName.$error"
ng-if="orderForm.fullName.$invalid && orderForm.$submitted">
This field is required</p>
<input type="submit" value="Submit" />
</form>
For me the problem was solved by adding ngMessgaes to my module dependencies.
I installed had it installed with bower before, but forgot to add it to module dependencies. For some reason it caused no errors. It only prevented my error messages from hiding.
you need to do three things:
1. add a boolean variable in your controller like: "showMessageBox" which is set to true.
2. when you submit you set "showMessageBox" to false.
3. on your message box you put the ng-show directive and bind it to "showMessageBox" variable
I actually just figured this out. I'm using Angular 1.4.2 and it would seem that Angular Messages is now part of the core build which I didn't pick up on before (I'd just forgotten to inject into the angular module), removed the angular-messages.js file (which was probably causing conflicts) and the above code works fine.
Anyone know why the seperate module is still available on code.angularjs.org? - https://code.angularjs.org/1.4.2/
Is there any way to pass an error message in custom form validation?
E.g. I have a directive that checks a username. There are three possible outcomes:
It is valid
It is invalid because it isn't a good username ("this.is-invalid")
It is invalid because it is already in use
I have a directive like (simplified pseudo-html):
<input type="text" namecheck></input><span ng-show="name.$error.namecheck">You had an error {{ error }}</span>
And in my custom directive, I can do
// check for a conflict and valid name here
ngModel.$setValidity("namecheck",false);
But how do I pass an error message that indicates if the problem was a conflict or invalid name? Is there anything like ngModel.$setValidityErrorMessage() ?
As I wrote in the comments, I just figured it out. I just need to use different validity flags. Nothing says that I have to use the same key in $setValidity() as the name of the directive!
<span ng-show="name.$error.nameinvalid">This is not a valid username, it must be alphanmueric</span>
<span ng-show="name.$error.nametaken">Sorry, the username {{ name }} is already taken</span>
And in the directive
// if I got a 409
ngModel.$setValidity("nametaken",false);
// if I got a 400
ngModel.$setValidity("nameinvalid",false);
The name of the $error is the error message!
No. Setting the validity on a form element just simply adds the appropriate class to the element, which can then be used to style the element to indicate an error. There aren't any error messages that indicate why the element is invalid. Angular doesn't provide that support.
You may have noticed error messages that pop up on required fields that are empty? In chrome they say something like: "Please fill out this field" or something. Those are browser-specific and aren't related to angular in any way.
You'd have to roll your own error messaging service. You can use the same ng-invalid classes to check when a form element is invalid and show the error messages based on that, but Angular doesn't provide that out of the box.
There is an example in the angular docs (found here) that shows one way you can do that.
UPDATE:
As of Angular 1.3, there is now support for the ngMessage and ngMessages directives. These new directives attempt to make form validation and error messaging less of a hassle. The angular docs for these directives are here. Check the link out for more details.
In my opinion, your three rules include both client and server validation. I'll validate the first two in client side, and the validate last rule in server side.
Because an username is duplicate or not, we get it until we post it to the server.
So, my practice is following:
<div class="col-md-offset-3 col-md-9" ng-show="detailForm.$error && detailForm.name.$invalid && (detailForm.name.$touched || detailForm.$submitted)"
ng-messages="detailForm.name.$error">
<div class="error-message" ng-message="required">the field is required </div>
<div class="error-message" ng-message="maxlength">you are too lang</div>
<div class="error-message" ng-message="pattern">your format is incorrect </div>
</div>
<div class="col-md-offset-3 col-md-9" ng-show="serverError && serverError.name">
<div class="error-message">{{serverError.name}}</div>
</div>