I have custom html5 error message for input, which changes validation error text in chrome.
<input
oninvalid="setCustomValidity('It's custom message!')"
onchange="try{setCustomValidity('')}catch(e){}">
How can I do this with Angular directive?
Updated
Let's say, I want type <input custom-validity> instead of this.
You can learn all about doing form validation the Angular way in their documentation.
You don't need to create your own directives, because angular already has great form validation support built in.
Below is an example how to use the $dirty and $invalid attributes to show or hide validation messages. 'dirty' means that the form has been modified by the user.
<div ng-app="app">
<form name="myForm" novalidate>
<p>
<label>Name
<input type="text" name="name" ng-model="name" required>
<span ng-show="myForm.name.$invalid && myForm.name.$dirty">
Name required
</span>
</label>
</p>
<p>
<label>Email
<input type="email" name="email" ng-model="email">
<span ng-show="myForm.email.$invalid && myForm.email.$dirty">
Put a valid email
</span>
</label>
</p>
<input type="submit" value="Submit" ng-disabled="myForm.$invalid">
</form>
</div>
You can also style the valid/invalid fields using a style rule like this:
form input.ng-invalid.ng-dirty { ... }
Related
I have the following code in an input text box with the required attribute, but when I tab off of the field or submit the form, it doesn't stop the form from submitting and informing the user the field is required.
<div class="col-sm-8">
<input type="text" ng-required="true" class="form-control"
placeholder="Enter Total Amount" id="txtTotalAmount"
ng-model="formCtrl.AddCheckDeposit.TotalAmount" />
</div>
What do I need to do to make the required directive to work?
For that you should fire ng-submit event when form is valid
ng-submit="myForm.$valid && submit()"
Seems like you have also missed the name attribute on your input field, also for showing an error you could use ng-show/ng-messages directive
<form name="myForm" ng-submit="myForm.$valid && submit()">
<div class="col-sm-8">
<input type="text" ng-required="true" class="form-control" placeholder="Enter Total Amount" name="txtTotalAmount"
id="txtTotalAmount" ng-model="formCtrl.AddCheckDeposit.TotalAmount" />
<span ng-show="myForm.txtTotalAmount.$error.required">Required</span>
</div>
</form>
I've this basic form implemented using AngularJS and Bootstrap:
http://jsfiddle.net/dennismadsen/0stwd03k/
HTML
<div ng-controller="MyCtrl">
<form class="well" name="formTest" ng-submit="save()">
<div class="form-group">
<label for="name">Name*</label>
<input type="name" class="form-control" id="name" placeholder="Enter name" required />
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
JavaScript
var myApp = angular.module('myApp', []);
function MyCtrl($scope) {
$scope.save = function () {
};
}
Result
The Name input field is required. When I click the submit button, I need the input field to have a red border if it's invalid. How can this be done?
Alternatively, if I unfocus the input field and it's still not valid, it would be great that the red corder is shown on that time, instead of waiting for the form submit.
Twitter Bootstrap has an has-error class, so I would use this in conjunction with ng-class for the form group, then a label with the label and label-danger classes for good measure:
<div class="form-group" ng-class="{'has-error': errors.Name }">
<label for="name">Name*</label>
<input type="name" class="form-control" id="name" placeholder="Enter name" required />
<span class="label label-danger" ng-if="errors.Name">{{errors.Name}}</span>
</div>
Then in your controller, have an errors object, and set the Name property of this to a string when the name is invalid.
The first thing you were missing was adding ng-model='name' to input field, then only will the form become invalid once you click submit, otherwise the form will always be valid since it considers that there is no field present.
Then I'd add the submitted class on the submit click button, then put the border css like .submitted would be the parent and .ng-invalid would be the child so we can put the style on .submitted .ng-invalid
HTML
<div ng-controller="MyCtrl">
<form class="well" name="formTest" ng-class="{'submitted': submitted}" ng-submit="save()" >
<div class="form-group">
<label for="name">Name*</label>
<input type="name" class="form-control" id="name" placeholder="Enter name" ng-model="name" required />
</div>{{submitted}}
<button type="submit" class="btn btn-default" ng-click="submitted= true;">Submit</button>
</form>
</div>
CSS
.submitted .ng-invalid{
border: 1px solid red;
}
Working Fiddle
Hope this could help you, Thanks.
Basically you need angular to take over validation, so add novalidate to form. Also add ng-class to input field to determine wether to add error css
<form name="myForm" novalidate ng-submit="test()">
<input type="text" name="user" ng-model="user" required ng-class="myForm.user.$invalid && myForm.user.$dirty ? 'error' : ''">
<span style="color:red" ng-show="myForm.user.$dirty && myForm.user.$invalid">
<span ng-show="myForm.user.$error.required">Username is required. </span>
</span>
<p>
<input type="submit"
ng-disabled="myForm.user.$dirty && myForm.user.$invalid ||
myForm.email.$dirty && myForm.email.$invalid">
</p>
</form>
Good luck..
The question is as simple as it is described in the "Title" :)
I just want to be able to put a break-point in the non-minified version of the AngularJS framework and see the logic that is executed when you try to submit a form that has an empty input with the "required" attribute. This logic should normally check if the input is not empty. The "this.$isEmpty = function(value) {...}" or "requiredDirective" are not hit when you click submit!
E.g. from AngularJS official site (https://docs.angularjs.org/guide/forms):
<form name="form" class="css-form" novalidate>
Name:
<input type="text" ng-model="user.name" name="uName" required=""/>
<br/>
<div ng-show="form.$submitted || form.uName.$touched">
<div ng-show="form.uName.$error.required">Tell us your name.</div>
</div>
<input type="submit" ng-click="update(user)" value="Save"/>
</form>
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>
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