Form Validation
Description
AngularJS makes it easy to handle client-side form validations.
To use form validations, we must ensure that the form has a name associated with it.
All input fields can have some basic validations, like minimum length, maximum length, etc. These are all available on the new HTML5 form attributes.
We can use the novalidate flag on the form element to prevent the validating.
Let's look at all the validation options we have that we can place on an input field:
Required
To mark a required field, we add the HTML5 tag, required, to the input field:
<input type="text" required />Minimum Length
To set the minimum length for form input, we add the AngularJS directive ng-minlength="{number}" to the input field:
<input type="text" ng-minlength=5 />Maximum Length
To set maximum length for a form input, we can add the AngularJS directive ng-maxlength="{number}":
<input type="text" ng-maxlength=20 />Matches a Pattern
To ensure that an input matches a regex, we can use ng-pattern="/PATTERN/":
<input type="text" ng-pattern="[a-zA-Z]" />To validate an email address, we set the input type to email:
<input type="email" name="email" ng-model="user.email" />Number
To validate an input field has a number, we set the input type to number:
<input type="number" name="age" ng-model="user.age" />URL
To validate that an input represents a URL, set the input type to url:
<input type="url" name="homepage" ng-model="user.myurl" />Example
The following code is revised from http://jsbin.com/ePomUnI/5/edit.
<!doctype html>
<html ng-app="myApp">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.2/angular.js"></script>
<style id="jsbin-css">
input.ng-invalid {<!-- www .j a va 2 s. c o m-->
border: 1px solid red;
}
input.ng-valid {
border: 1px solid green;
}
</style>
</head>
<body>
<form name="signup_form" novalidate ng-submit="signupForm()">
<div class="row">
<div class="large-12 columns">
<label>Your name</label>
<input type="text"
placeholder="Name"
name="name"
ng-model="signup.name"
ng-minlength=3
ng-maxlength=20 required />
<div class="error"
ng-show="signup_form.name.$dirty && signup_form.name.$invalid">
<small class="error"
ng-show="signup_form.name.$error.required">
Your name is required.
</small>
<small class="error"
ng-show="signup_form.name.$error.minlength">
Your name is required to be at least 3 characters
</small>
<small class="error"
ng-show="signup_form.name.$error.maxlength">
Your name cannot be longer than 20 characters
</small>
</div>
</div>
</div>
<div class="row">
<div class="large-12 columns">
<label>Your email</label>
<input type="email"
placeholder="Email"
name="email"
ng-model="signup.email"
ng-minlength=3 ng-maxlength=20 required />
<div class="error"
ng-show="signup_form.email.$dirty && signup_form.email.$invalid">
<small class="error"
ng-show="signup_form.email.$error.required">
Your email is required.
</small>
<small class="error"
ng-show="signup_form.email.$error.minlength">
Your email is required to be at least 3 characters
</small>
<small class="error"
ng-show="signup_form.email.$error.email">
That is not a valid email. Please input a valid email.
</small>
<small class="error"
ng-show="signup_form.email.$error.maxlength">
Your email cannot be longer than 20 characters
</small>
</div>
</div>
</div>
<div class="large-12 columns">
<label>Username</label>
<input type="text"
placeholder="Desired username"
name="username"
ng-model="signup.username"
ng-minlength=3
ng-maxlength=20
ensure-unique="username" required />
<div class="error" ng-show="signup_form.username.$dirty && signup_form.username.$invalid">
<small class="error" ng-show="signup_form.username.$error.required">Please input a username</small>
<small class="error" ng-show="signup_form.username.$error.minlength">Your username is required to be at least 3 characters</small>
<small class="error" ng-show="signup_form.username.$error.maxlength">Your username cannot be longer than 20 characters</small>
<small class="error" ng-show="signup_form.username.$error.unique">That username is taken, please try another</small>
</div>
</div>
<button type="submit" ng-disabled="signup_form.$invalid" class="button radius">Submit</button>
</form>
<script id="jsbin-javascript">
angular.module('myApp', [])
.directive('ensureUnique', ['$http', function($http) {
return {
require: 'ngModel',
link: function(scope, ele, attrs, c) {
scope.$watch(attrs.ngModel, function() {
$http({
method: 'POST',
url: '/api/check/' + attrs.ensureUnique,
data: {'field': attrs.ensureUnique}
}).success(function(data, status, headers, cfg) {
c.$setValidity('unique', data.isUnique);
}).error(function(data, status, headers, cfg) {
c.$setValidity('unique', false);
});
});
}
};
}]);
</script>
</body>
</html>