I enter the page and I can see the validation message immediately.
<div ng-class="{'has-error': test.$invalid}" class="form-group" >
<input id="field" name="field" required class="form-control" ng-model="field" type="text"/>
<div class="help-block error" ng-show="test.field.$error.required">Required</div>
</div>
link
How can avoid that ?
Your issue is essentially with respect to the fact that the condition for
ng-show is only test.field.$error.required.
What's the problem with this?
Even when the page loads, the field is still not a valid email id.
So, what's the fix?
You need to check that the user has actually clicked on the field and the field is no longer pristine.
How do we do that?
In the ng-show, add the following condition.
test.field.$error.required && test.field.$dirty
Here is a working DEMO
You also need to add a check to see if the input has been touched too.
<div ng-class="{'has-error': test.$invalid}" class="form-group" >
<input id="field" name="field" required class="form-control" ng-model="field" type="text"/>
<div class="help-block error" ng-show="test.field.$error.required && test.field.$touched">Required</div>
</div>
Related
I'm trying to perform simple form validation. I'm using required and ng-minlength conditions on my fields and ng-messages to display the error messages. the error messages should display only when user access the input field. But I do not see any error messages appearing. When I examined using chrome developer tools, I found the classes on the input field are changing but the 'has-error' class is not being added on the other div elements that are checking for this condition.
this is when the application got loaded.
this is when I clicked the username field and left the field without giving any data. Please observe the classes of the elements marked in red boxes. I'm not getting any errors displayed. What might the issue be?
1 this is the ng-messages code snippet that i'm using
<form role="form" name="userForm" novalidate class="container-fluid">
<div class="margin-bottom" ng-class="{'has-error' : userExists.notAvailable , 'has-error': userForm.username.$touched && userForm.username.$invalid}">
<label for="email">username</label>
<input class="form-control" type="text" placeholder="UserName" name="username" ng-blur="checkingUser($event)" ng-model="username" required ng-minlength="4">
<div ng-messages='userExists'>
<div ng-message='error'>Error!</div>
<div class="form-group" ng-message='notAvailable' class="has-error">Username already exists. Please choose a different username!!</div>
</div>
<div class="help-block" ng-messages="userForm.username.$error" ng-show="userForm.username.$touched" ng-class="{'has-error': userForm.username.$touched && userForm.username.$invalid}">
<div class="form-group" ng-message='required' class="has-error">Username cannot be empty</div>
<div class="form-group" ng-message='minlength'>minimum 4 charcters</div>
</div>
</div>
Edited after the source code is posted:
<div class="margin-bottom" ng-class="{'has-error' : userExists.notAvailable , 'has-error': userForm.username.$touched && userForm.username.$invalid}">
<label for="email">username</label>
<input class="form-control" type="text" placeholder="UserName" name="username" ng-blur="checkingUser($event)" ng-model="username" ng-required="true" ng-minlength="4">
<div ng-messages='userExists'>
<div ng-message='error'>Error!</div>
<div class="form-group has-error" ng-message='notAvailable' >Username already exists. Please choose a different username!!</div>
</div>
<div ng-messages="userForm.username.$touched && userForm.username.$error" ng-class="{'has-error': userForm.username.$touched && userForm.username.$invalid}">
<div class="form-group has-error" ng-message='required'>Username cannot be empty</div>
<div class="form-group" ng-message='minlength'>minimum 4 charcters</div>
</div>
</div>
This works on my machine.
The message will be displayed after you've submitted the form.
Make sure you've added required dependency in your module to use ngMessage. If necessary, please post the AngularJS code as well.
I have one checkbox/radio after clicking on it some fields will be shown and in that some fields need to be marked as mandatory and some fields are not mandatory. This mandatory conditions is applied before showing those fields and those are also disabled before showing but I am unable to submit the form because of that.
I don't want these kind of fields to be validated when disabled. Validation should work when I click on radio button.
Can anybody help me in this how to do this???
<div class="col-lg-6">
<div class="form-group">
<label class="control-label">{{controls.label}}</label>
<input type="checkbox" class="form-control input-lg mandatory" ng-model="formData[$parent.$parent.$index][controls.id]" value="{{controls.value}}" name="control_{{$parent.$parent.$index}}_{{controls.id}}" ng-required="{{controls.mandatory}}">
<div ng-show="submitted && profilecreate.control_{{$parent.$parent.$index}}_{{controls.id}}.$error.required" class="error_message">This field is required</div>
</div>
</div>
<div class="col-lg-6" ng-repeat="child in controls.children">
<div class="form-group" ng-hide="!formData[$parent.$parent.$index][child.parentId]">
<label class="control-label">{{child.label}}</label>
<input
type="{{child.type}}"
id="{{$parent.$parent.$index}}_{{child.id}}"
ng-model="formData[$parent.$parent.$index][child.id]"
name="control_{{$parent.$parent.$index}}_{{child.id}}"
ng-disabled="!formData[$parent.$parent.$index][child.parentId]"
ng-required="{{child.mandatory}}"
ng-class="!formData[$parent.$parent.$index][child.parentId] ? 'disabled' : 'normalinput'">
<div ng-show="submitted && profilecreate.control_{{$parent.$parent.$index}}_{{child.id}}.$error.required" class="error_message">This field is required</div>
</div>
</div>
The reason it's triggering validation even though it's disabled is because you are using ng-hide and not ng-if. Try changing that and it might work.
Here is the difference between ng-if and ng-show/hide
I am having trouble displaying custom message upon validation in my AngularJS app.
Below is my code:
<div class="row">
<div class="input-field col s12">
<input id="description" rows="3" class="materialize-textarea no-pad-bot no-pad-top" ng-model="Description" ng-required="isValidationRequired()" ng-minlength="5"></input>
<span class="help-inline" ng-show="submitted && frm1.description.$error.required">Comments are required</span>
</div>
</div>
<input type="submit" class="white-text waves-effect btn" value="Enter" ng-click="submitted=true" />
The above works but the message displayed is "Please fill out this field". Which is not the message I specified. I want my own custom message displayed. I cannot find anything wrong with my code. Can anyone help point me in the right direction.
There are a few things wrong with your code.
Form isn't included, I am assuming you just didn't include that bit of code in this post.
You need to specify the name of the input.
So when doing frm1.description, it knows what description is.
Make sure the function isValidationRequired returns true
You need to include novalidate in the form tag
Here, I have a working example
<form novalidate name="frm1">
<div class="row">
<div class="input-field col s12">
<input name="description" id="description" rows="3" class="materialize-textarea no-pad-bot no-pad-top" ng-model="Description" ng-required="isValidationRequired()" ng-minlength="5"></input>
<div class="help-inline" ng-show="submitted && frm1.description.$error.required">Comments are required</div>
</div>
http://jsfiddle.net/mlhuff12/Lvc0u55v/4503/
Ur getting a message you did code? Sounds like a browser validation. Check your statement and add "novalidate" to it. I.e.
<form novalidate>
Maybe this helps...
AngularJS - I am using third party plugin ng-intl-tel-input. This is using for phone/mobile number showcase. All is well, populating placeholders(example phone number) based on country flag changes. Here I am facing problem that If entered value is incorrect based on country code & not valid number. Its returning null.. I wanna validate that & need to show user in valid number & need that updated number..How an I get?
<input class="form-control" type="text" ng-model="mobile" ng-intl-tel-input>
You can check demo from below URL
http://hodgepodgers.github.io/ng-intl-tel-input/
and html source code from below URL
https://github.com/hodgepodgers/ng-intl-tel-input/blob/master/index.html
Try by changing below code for input.
<form name="form">
<div class="form-group" ng-class="{'has-error': form.mobile.$invalid && form.mobile.$touched, 'has-success': form.mobile.$valid}">
<input type="text" class="form-control" id="mobile" name="mobile" ng-model="mobile" ng-intl-tel-input>
<span class="help-block" ng-show="form.mobile.$pristine && form.mobile.$untouched">Please type a telephone number</span>
<span class="help-block" ng-show="form.mobile.$invalid && form.mobile.$touched">Invalid :(</span>
<span class="help-block" ng-show="form.mobile.$valid">Valid :) </span>
</div>
</form>
I'm having trouble getting a message to display when the field input is invalid. I can see the classes being correctly applied to the element i.e. ng-dirty ng-invalid ng-invalid-pattern so I just need to make the error message display. Is there an issue with my html?
Thanks!
<form ng-controller="FormCtrl" name="TestForm" action="http://myserver/api" method="post" novalidate>
<div class="form-group">
<input class="form-control" type="text" id="vld" name="vld" data-ng-pattern="/(^$)|(\b\d{9}\b)/" data-ng-model="model.tfn">
<span class="error" data-ng-show="model.tfn.$invalid">Correct input etc...</span>
</div>
</form>
The information you are looking for is part of the FormController. You need to setup a formController via ng-form directive:
<div class="form-group" ng-form="myForm">
<input class="form-control" type="text" id="vld" name="vld" data-ng-pattern="/(^$)|(\b\d{9}\b)/" data-mg-model="model.tfn">
<span class="error" data-ng-show="myForm.vld.$invalid">Correct input etc...</span>
</div>
If this is done you may access the information by [Name of the OFrmController].[Name of the input field].$invalid e.g. myForm.vld.$invalid