How to Apply AngularJS Form Validation

AngularJS is one of the most popular JavaScript framework developed by Google. This framework is dominating the world because of its powerful features. In this tutorial, we will study how to apply angularjs form validation.

This process is very simple and straight-forward. We will walk through it step by step. As an example, let’s assume we have a simple form and we need to apply some basic validation to it. Below is my form listed.

<html>
	<head>
		<title>AngularJS Form Validation</title>
		<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
	</head>
	<body>
		<div class="container">
			<div class="row">
				<div class="col-md-6">
					<div class="bs-example">
					    <form name="userForm" ng-submit="addUser(userForm)" ng-class="{submitted:userformsubmit}" novalidate>
							<div class="form-group">
								<label for="fname">First Name</label>
								<input type="text" class="form-control" id="fname" ng-model="userForm.fname" ng-minlength="5" ng-pattern="/^[a-zA-Z]*$/" placeholder="First Name" required>
							</div>
							<div class="form-group">
								<label for="lname">Last Name</label>
								<input type="text" class="form-control" id="lname" placeholder="Last Name" ng-model="userForm.lname" required>
							</div>
							<div class="form-group">
								<label for="email">Email</label>
								<input type="email" class="form-control" id="email" placeholder="Email" ng-model="userForm.email" required>
							</div>
							<button type="submit" class="btn btn-default">Submit</button>
						</form>
					</div>
				</div>
			</div>
		</div>
	</body>
</html>

You observed that we have added required attribute to our form fields which would apply default html5 validation. But we need our custom validations, not a html5 one. So we should add novalidate attribute to our form tag which will remove html5 validation.

<form name="userForm" novalidate>

As we are using AngularJS we have to follow there rules as well. We should define ng-app and ng-controller.

<html ng-app="app">
<body ng-controller="myCtrl">

We need to add one custom class to our form tag once we submit the form. By using this class we can add css for error messages.

<form name="userForm" ng-submit="addUser()" 
ng-class="{submitted:userformsubmit}" novalidate>

But how our custom class can add to form automatically? Its a little magic. Set the variable userformsubmit to true.

<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript">
	angular.module('app', []).
	controller('myCtrl', function($scope){
		$scope.addUser = function(user) {
			$scope.userformsubmit = true;
		}
	});
</script>

Above code will add class ‘submitted’ to our form once we submit it. But you never notice what’s happening until we add some css-tricks. So lets add a little piece of css here.

<style>
.submitted .ng-invalid {border: 1px solid red;}
</style>

We are adding a red color border to our required form fields. AngularJS add class ‘ng-invalid’ automatically if the form field is not valid.

Here we are done with the validations. But we are not over yet. What if we fill all fields and want to perform further operations like submission of form data? We should check whether the form is valid in such case.

if($scope.userForm.$valid) {
	console.log('success');
}

Our Final Code Of AngularJS Form Validation

<html ng-app="app">
	<head>
		<title>AngularJS Validation</title>
		<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
	</head>
	<body ng-controller="myCtrl">
		<div class="container">
			<div class="row">
				<div class="col-md-6">
					<div class="bs-example">
					    <form name="userForm" ng-submit="addUser(userForm)" ng-class="{submitted:userformsubmit}" novalidate>
							<div class="form-group">
								<label for="fname">First Name</label>
								<input type="text" class="form-control" id="fname" ng-model="userForm.fname" ng-minlength="5" ng-pattern="/^[a-zA-Z]*$/" placeholder="First Name" required>
							</div>
							<div class="form-group">
								<label for="lname">Last Name</label>
								<input type="text" class="form-control" id="lname" placeholder="Last Name" ng-model="userForm.lname" required>
							</div>
							<div class="form-group">
								<label for="email">Email</label>
								<input type="email" class="form-control" id="email" placeholder="Email" ng-model="userForm.email" required>
							</div>
							<button type="submit" class="btn btn-default">Submit</button>
						</form>
					</div>
				</div>
			</div>
		</div>
		<script type="text/javascript" src="js/angular.min.js"></script>
		<script type="text/javascript">
			angular.module('app', []).
			controller('myCtrl', function($scope){
				$scope.addUser = function(user) {
					$scope.userformsubmit = true;
					if($scope.userForm.$valid) {
                    	console.log('form is valid!');
                    }

				}
			});
		</script>
	</body>
</html>

I hope you understand how to apply angularjs form validation. For any questions or suggestions please leave a comment below.

If you liked this article, then please subscribe to our YouTube Channel for video tutorials.

Leave a Reply

Your email address will not be published. Required fields are marked *