Source Code

AngularJS Form Validation Example

Simple AngularJS offers client-side form validation.

Simple Client-side validation can not alone secure user input(Not Secured). Server side validation is also necessary(required).

You name is required.

You username is required.

Username is too short.

Username is too long.

Your password is required.

Your confirm password is required.

Confirm password doesnot match.

Email is required.

Enter a valid email.

Enter a valid contactno.

Select country.

Select city.

Accept terms & conditions.

Example : index.html


<!DOCTYPE html>
<html>
<head> 
<link rel="stylesheet" href="bootstrap.min.css" type="text/css" />
<link rel="stylesheet" href="bootstrap-theme.css" type="text/css" />
<script src="angular.min.js"></script>
</head>
<body ng-app="myapp" ng-controller="mainController">
 <div class="container">
	 <div class="row">
	<h2 align="center"></h2><p align="center"><mark>Simple Client-side validation can not alone secure user input(Not Secured). Server side validation is also necessary(required).</mark></p>
 </div>


 <div class="row"> 

 <div class="col-sm-8 col-sm-offset-2" style="background-color:#F5F5F5;">
 
 <div class="page-header"><h1 align="center">AngularJS Form Validation</h1>
 <p align="center">Simple AngularJS offers client-side form validation.</p>
 </div>
 
 <form name="userForm" ng-submit="submitForm()" novalidate>
 
 <div class="form-group" ng-class="{ 'has-error' : userForm.name.$invalid && (userForm.name.$dirty || submitted)}">
 <label>Name</label>
 <input type="text" name="name" class="form-control" ng-model="user.name" placeholder="Your Name" ng-required="true">
 <p ng-show="userForm.name.$error.required && (userForm.name.$dirty || submitted)" class="help-block">You name is required.</p>
 </div>
 
 <div class="form-group" ng-class="{ 'has-error' : userForm.username.$invalid && (userForm.username.$dirty || submitted)}">
 <label>Username</label>
 <input type="text" name="username" class="form-control" ng-model="user.username" placeholder="Your Username" ng-minlength="3" ng-maxlength="8" ng-required="true">
 <p ng-show="userForm.username.$error.required && (userForm.username.$dirty || submitted)" class="help-block">You username is required.</p>
 <p ng-show="userForm.username.$error.minlength && (userForm.username.$dirty || submitted)" class="help-block">Username is too short.</p>
 <p ng-show="userForm.username.$error.maxlength && (userForm.username.$dirty || submitted)" class="help-block">Username is too long.</p>
 </div>
 
 <div class="form-group" ng-class="{ 'has-error' : userForm.password.$invalid && (userForm.password.$dirty || submitted)}">
 <label>Password</label>
 <input type="Password" name="password" class="form-control" ng-model="user.password" placeholder="Your Password" ng-required="true">
 <p ng-show="userForm.password.$error.required && (userForm.password.$dirty || submitted)" class="help-block">Your password is required.</p>
 </div>
 
 <div class="form-group" ng-class="{ 'has-error' : userForm.confirmPassword.$invalid && (userForm.confirmPassword.$dirty || submitted)}">
 <label>Confirm Password</label>
 <input type="Password" name="confirmPassword" class="form-control" ng-model="user.confirmPassword" placeholder="Confirm Your Password" ng-compare="password" ng-required="true">
 <p ng-show="userForm.confirmPassword.$error.required && (userForm.confirmPassword.$dirty || submitted)" class="help-block">Your confirm password is required.</p>
 <p ng-show="userForm.confirmPassword.$error.compare && (userForm.confirmPassword.$dirty || submitted)" class="help-block">Confirm password doesnot match.</p>
 </div>
 
 <div class="form-group" ng-class="{ 'has-error' : userForm.email.$invalid && (userForm.email.$dirty || submitted)}">
 <label>Email</label>
 <input type="email" name="email" class="form-control" ng-model="user.email" placeholder="Your Email Address" ng-required="true">
 <p ng-show="userForm.email.$error.required && (userForm.email.$dirty || submitted)" class="help-block">Email is required.</p>
 <p ng-show="userForm.email.$error.email && (userForm.email.$dirty || submitted)" class="help-block">Enter a valid email.</p>
 </div>
 
 <div class="form-group" ng-class="{ 'has-error' : userForm.contactno.$invalid && (userForm.contactno.$dirty || submitted) }">
 <label>ContactNo</label>
 <input type="text" name="contactno" class="form-control" ng-model="user.contactno" placeholder="Your Contact No" ng-pattern="/^[789]\d{9}$/" maxlength="10">
 <p ng-show="userForm.contactno.$error.pattern && (userForm.contactno.$dirty || submitted)" class="help-block">Enter a valid contactno.</p>
 </div>
 
 <div class="form-group" ng-class="{ 'has-error' : userForm.country.$invalid && (userForm.country.$dirty || submitted)}">
 <label>Country</label>
 <select name="country" class="form-control"
 ng-model="user.country"
 ng-options="country.CountryId as country.Name for country in countryList"
 ng-required="true">
 <option value=''>Select</option>
 </select>
 <p ng-show="userForm.country.$error.required && (userForm.country.$dirty || submitted)" class="help-block">Select country.</p>
 </div>
 
 <div class="form-group" ng-class="{ 'has-error' : userForm.city.$invalid && (userForm.city.$dirty || submitted)}">
 <label>City</label>
 <select name="city" class="form-control"
 ng-model="user.city"
 ng-options="city.CityId as city.Name for city in cityList"
 ng-required="true">
 <option value=''>Select</option>
 </select>
 <p ng-show="userForm.city.$error.required && (userForm.city.$dirty || submitted)" class="help-block">Select city.</p>
 </div>
 
 <div class="form-group" ng-class="{ 'has-error' : userForm.terms.$invalid && (userForm.terms.$dirty || submitted)}">
 <label>Accept Terms & Conditions</label>
 <input type="checkbox" value="" name="terms" ng-model="user.terms" ng-required="true" />
 <p ng-show="userForm.terms.$error.required && (userForm.terms.$dirty || submitted)" class="help-block">Accept terms & conditions.</p>
 </div>

 <button type="submit" class="btn btn-primary">Register</button>
 </form>
 </div>
 </div>
</div>
</body>
</html>

Example : App.js


//defining module
var myapp = angular.module('myapp', []);
 
//creating custom directive
myapp.directive('ngCompare', function () {
 return {
 require: 'ngModel',
 link: function (scope, currentEl, attrs, ctrl) {
 var comparefield = document.getElementsByName(attrs.ngCompare)[0]; //getting first element
 compareEl = angular.element(comparefield);
 
 //current field key up
 currentEl.on('keyup', function () {
 if (compareEl.val() != "") {
 var isMatch = currentEl.val() === compareEl.val();
 ctrl.$setValidity('compare', isMatch);
 scope.$digest();
 }
 });
 
 //Element to compare field key up
 compareEl.on('keyup', function () {
 if (currentEl.val() != "") {
 var isMatch = currentEl.val() === compareEl.val();
 ctrl.$setValidity('compare', isMatch);
 scope.$digest();
 }
 });
 }
 }
});
 
// create angular controller
myapp.controller('mainController', function ($scope) {
 
 $scope.countryList = [
 { CountryId: 1, Name: 'India' },
 { CountryId: 2, Name: 'USA' }
 ];
 
 $scope.cityList = [];
 
 $scope.$watch('user.country', function (newVal,oldVal) {
 
 if (newVal == 1)
 $scope.cityList = [
 { CountryId: 1, CityId: 1, Name: 'Gujrat' },
 { CountryId: 1, CityId: 2, Name: 'Delhi' },
 { CountryId: 1, CityId: 3, Name: 'Ahemdabad' }];
 else if (newVal == 2)
 $scope.cityList = [
 { CountryId: 2, CityId: 3, Name: 'Texas' },
 { CountryId: 2, CityId: 4, Name: 'NewYork' }];
 else
 $scope.cityList = [];
 });
 
 // function to submit the form after all validation has occurred 
 $scope.submitForm = function () {
 
 // Set the 'submitted' flag to true
 $scope.submitted = true;
 
 if ($scope.userForm.$valid) {
 alert("Form is valid!");
 }
 else {
 alert("Please correct errors!");
 }
 };
});

Example : Style.css


.help-block{color:red;}