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.

2 Comments

  • Thanks so much for providing individuals with an extraordinarily brilliant chance to read from this web site. It’s usually very ideal and as well , jam-packed with a great time for me and my office co-workers to search your website more than thrice per week to find out the newest secrets you have got. And definitely, I’m just certainly fascinated concerning the beautiful tricks you give. Selected 4 areas in this posting are undoubtedly the most suitable we have had.

  • Good article and straight to the point. I don’t know if this is truly the best place to ask but do you people have any thoughts on where to get some professional writers? Thank you 🙂