Hello readers, In this tutorial, we are going to see Form Validation using Angular JS. Almost every website uses forms to perform different tasks like signing up users or obtaining their contact information. It is very important to make sure that a user who is filling out the form is at least entering valid information in the input fields.

Form Validation using Angular Js:

Create a HTML file and write the following code into it.

<html>
<head>
<title>
Validation Example Angular Js
</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.2/angular.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.2/css/bootstrap.css" />
<script type="text/javascript">
var app = angular.module('myApp', []);
app.controller('validateCtrl', function($scope) {
$scope.OnValidate = function($event) {
$scope.submitted = true;

if ($scope.myForm.$valid) 
{
alert("Welcome");
}
}
});
</script>
<style type="text/css">
.error
{
color:red;
font-weight:bold;
}
</style>
<head>
<body>
<div class="container">
<br/>
<h1>
Angular Js Validation Example
</h1>
<br/>
<form ng-app="myApp" ng-controller="validateCtrl" name="myForm" novalidate form-submit-validation="">
<div class="form-group">
<label >First Name:</label>

<input type="text" id="txtFirstName" name="FirstName" ng-model="FirstName" class="form-control" required>
<span ng-show="submitted || myForm.FirstName.$dirty && myForm.FirstName.$invalid">
<span ng-show="myForm.FirstName.$error.required" class="error">First Name is required.</span>
 
</span>
 
</div>
<div class="form-group">
<label> Last Name:</label>
<input type="text" id="txtLastName" name="LastName" ng-model="LastName" required class="form-control">
<span ng-show="submitted || myForm.LastName.$dirty && myForm.LastName.$invalid">
<span ng-show="myForm.LastName.$error.required" class="error">Last Name is required.</span>
 
</span>
</div>
<div class="form-group">
<label> Email:</label>
<input type="email" class="form-control" name="Email" id="txtEmail" ng-model="Email" required>
<span ng-show="submitted || myForm.Email.$dirty && myForm.Email.$invalid">
<span ng-show="myForm.Email.$error.required" class="error">Email is required.</span>
<span ng-show="myForm.Email.$error.email" class="error">Invalid email address.</span>
</span>
</div>
<div class="form-group">
<label> User Name:</label>
<input type="text" id="txtUserName" class="form-control" name="UserName" ng-model="UserName" ng-maxlength="12" required>
<span ng-show="submitted || myForm.UserName.$dirty && myForm.UserName.$invalid">
<span ng-show="myForm.UserName.$error.required" class="error">User Name is required.</span>

<span ng-show="myForm.UserName.$error.maxlength" class="error">User Name should contain 12 character.</span> 
</span>
</div>
<div class="form-group">
<label> Password:</label>
<input type="password" id="txtPassword" class="form-control" name="Password" ng-model="Password" ng-maxlength="10" ng-minlength="6" required>
<span ng-show="submitted || myForm.Password.$dirty && myForm.Password.$invalid">
<span ng-show="myForm.Password.$error.required" class="error">Password is required.</span>

<span ng-show="myForm.Password.$error.minlength" class="error">Password can not be less than 6 character</span> 
<span ng-show="myForm.Password.$error.maxlength" class="error">Password can not be greater than 10 character.</span> 
</span>
</div>

<p style="text-align:right">
<input type="button" ng-click="OnValidate()" class="btn btn-primary" value="Post">
</p>
</form>
</div>
</body>
</html>

Run the following in the browser.

Form Validation

See Demo

View More:

Conclusion:

I hope you enjoyed my this post about Form Validation using Angular JS. I will appreciate your feedback, comments, and suggestions.

Thank You.

Leave a Comment