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...
Related
I'm new in AngulsrJS and I've got following code:
<form ng-if="editorCtrl.edit" class="form-horizontal" role="form" ng-submit="editorCtrl.saveEntry()">
<div class="form-group">
<div class="col-md-6" ng-repeat="(key,field) in editorCtrl.editEntry">
<label>{{key}}</label>
<input type="text" class="form-control" value={{field}} />
</div>
</div>
<!-- ng-model="editorCtrl.toSave[key]" ng-value="{{field}}" that part was in input attributes -->
<div class="form-group">
<div style="padding-left:110px">
<input type="submit" value="Update selected entry" ng-disabled="form.$invalid" class="btn btn-primary"/>
</div>
</div>
</form>
Now I need to obtain values from input fields. I tried to use ng-model="editorCtrl.toSave[key], but it's not working in a correct way.
Any suggestions how to resolve this situation ?
if you can consider no necesary the "toSave" object maybe you can use the 2-way data binding properly only using editEntry Object :
<input type="text" class="form-control" value={{field}} ng-model="editorCtrl.editEntry[key]"/>
In this way after a submit you will get editEntry with the fields modifieds (or not), here is an example
https://jsfiddle.net/pv8qrwty/1/
run the example and if you modified the fields after you press the submit button it will be displayed in your browser console
hope this help ! and sorry for my english !
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 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>
I can not get Angular.js required or ng-required to work. I want it to where if the user hits ok, they have to have some text in the textbox.
<div class="modal-body">
<p>Your change will be logged. Please provide a ticket number or comment for reference</p>
<div class="row">
<div class="span4">
<textarea type="text" class="form-control"
ng-model="commentBox.text"
ng-required="commentBox.text">
</textarea>
</div>
</div>
</div>
Scratching my head.....
two things:
make sure that value you are passing to ng-required is boolean (to be technically correct, it should evaluate to boolean)
<textarea type="text" class="form-control"
ng-model="commentBox.text"
ng-required="commentBox.textRequired">
</textarea>
//somewhere in your controller
$scope.commentBox.textRequired = true
you would need form.$invalid on your button
<button type="submit" ng-disabled="formname.$invalid" ng-click="onsubmit()"></button>
so to complete it
<ng-form name="exampleForm">
<textarea type="text" ng-model="commentBox.text" ng-required="true"></textarea>
<button ng-disabled="exampleForm.$invalid" ng-click="onsubmit()"></button>
</ng-form>
also without adding another prop, you could set it to
ng-required="!!commentBox.text"
I want to implement some simple form validation in my AngularJS app, but I don't want it to show any validation errors until after the user has clicked the form submit button. I don't want it to validate as I type or even on exiting the field.
Is there a way to do this? I'll need to write at least one custom validator directive so it will need to work with that.
I am finding form validation in AngularJS to be very difficult so far, it's hard to get it to work exactly as you want.
You could do something like this. Here's an example
<form name="form" ng-app>
<div class="control-group" ng-class="{true: 'error'}[submitted && form.email.$invalid]">
<label class="control-label" for="email">Your email address</label>
<div class="controls">
<input type="email" name="email" ng-model="email" required />
<span class="help-inline" ng-show="submitted && form.email.$error.required">Required</span>
<span class="help-inline" ng-show="submitted && form.email.$error.email">Invalid email</span>
</div>
</div>
<button type="submit" class="btn btn-primary btn-large" ng-click="submitted=true">Submit</button>
</form>