In web technology validation is used to prevent spam entries. There are various kind of form fields validations. Some of them are Required field validation, email validation, date field validation or number validation. In this demo app I created these 4 AngularJS Form Validation (Required Field, Email, Number and Date).
In the below app I have 4 form fields Name, Email, Contact Number & Date of Birth. Name is a required field. Without Name an user is not allowed to submit the form. As an advanced feature AngularJS made validations easy. By simply adding a single line of code ng-show="userForm.name.$error.required"
I can easily made Name field as mandatory.
To valid an email here I used pattern. Validating the pattern against email entry using AngularJS ng-pattern directive. Similar thing I did for Number validation is Contact Number field. To validate Date field in the beginning of script block I declared a variable for date pattern with value YYYY-MM-DD. Using ng-pattern in date field validating the date pattern variable.
AngularJS-Form-Validation.htm
<!Doctype html>
<html lang="en">
<head>
<title>AngularJS Form Validation Example</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js"></script>
<script type="text/javascript">
var validateApp=angular.module('validateAngularApp',[]);
validateApp.controller("validateAngularctrl",function($scope){
/*Page Title goes Here*/
$scope.title="Validations using AngularJS";
/*Date pattern you can update Here*/
$scope.datepattern="YYYY-MM-DD";
$scope.userRegester=function(name, email, contact, dob) {
if(name!=null || email!=null || contact!=null || dob!=null)
{
alert("Registration Successfull !!!");
}
else
{
alert("Not Successfull Please try again.");
}
}
});
</script>
</head>
<body ng-app="validateAngularApp" ng-controller="validateAngularctrl">
<div role="main">
<header>
<h2>{{title}}</h2>
</header>
<section>
<h2>Registration User Form</h2>
<form role="form-inline" name="userForm" action="" method="" novalidate>
<div>
<label for="name">Name:</label>
<input type="text" name="name" ng-model="uname" placeholder="Enter your name" required />
<!-- show an error if this isn't filled in -->
<span ng-show="userForm.name.$error.required" ng-style="{color:'red'}">Your name is required.</span>
</div>
<div>
<label for="email">Email:</label>
<input type="email" name="email" ng-model="uemail" placeholder="Enter your email" ng-pattern="/^[a-z]+[a-z0-9._]+@[a-z]+\.[a-z.]{2,5}$/ " required/>
<span ng-show="userForm.email.$error.required" ng-style="{color:'red'}">Your email is required .</span>
<span ng-show="userForm.email.$error.pattern" ng-style="{color:'red'}">Your email should be in correct format ex abc@gmail.com .</span>
</div>
<div>
<label for="contact Number">Contact Number:</label>
<input type="text" name="contactNumber" ng-model="ucontact" placeholder="Enter your Contact details" ng-pattern="/^[0-9]{10,10}$/" ng-minlength="10" ng-maxlength="10" required />
<span ng-show="userForm.contactNumber.$error.required" ng-style="{color:'red'}">Your contact is required .</span>
<span ng-show="userForm.contactNumber.$error.pattern" ng-style="{color:'red'}">Mobile should be numeric</span>
<span ng-show="userForm.contactNumber.$error.minlength" ng-style="{color:'red'}">contact number should be minimum of 10 digits .</span>
<span ng-show="userForm.contactNumber.$error.maxlength" ng-style="{color:'red'}">contact number should be maximum of 10 digits .</span>
</div>
<div>
<label for="date_of_birth">Date of Birth:</label>
<input type="text" name="dob" ng-model="udob" placeholder="Enter your date of birth in the format of YYYY-MM-DD" ng-pattern="datepattern"required />
<span ng-show="userForm.dob.$error.required" ng-style="{color:'red'}">Your date of birth is required </span>
<span ng-show="userForm.dob.$error.pattern" ng-style="{color:'red'}">Date of Birth must be in the format of YYYY-MM-DD</span>
</div>
<button type="submit" ng-click="userRegester(e1,e2,e3,e4)">Register</button>
</form>
</section>
<footer>© All right reserved</footer>
</div>
</body>
</html>
