AngularJS Form Validation Example – onlinecode
In this post we will give you information about AngularJS Form Validation Example – onlinecode. Hear we will give you detail about AngularJS Form Validation Example – onlinecodeAnd how to use it also give you demo for it if it is necessary.
Today, We will start to learn with angularjs. So first We will discuss form validation with angularjs. We create the form using bootstrap and that form we will make angular form validation.
We will take form fields like as first name, last name, email, mobile and address. We will create form validation using the rules such as required, email, minlength, and maxlength. basically AngularJS provides its additional properties $dirty, $valid, $invalid, and $pristine. So we will check the form validation using the additional properties.
Let’s look at a below example.
<!DOCTYPE html>
<html>
<head>
<title>AngularJS Form Validation Example - onlinecode</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<style>
input.ng-invalid, pre.ng-invalid
{
border-color:red;
}
</style>
</head>
<body>
<div >
<h2>AngularJS Form Validation Example</h2>
<form method="post" name="myForm" ng-app="myApp" ng-controller="validateCtrl" novalidate>
<div >
<label for="txtFname">First Name*</label>
<input type="text" name="txtFname" id="txtFname" ng-model="txtFname" required>
<span style="color:red" ng-show="myForm.txtFname.$dirty && myForm.txtFname.$invalid">
<span ng-show="myForm.txtFname.$error.required">FirstName is required.</span>
</span>
</div>
<div >
<label for="txtLname">Last Name*</label>
<input type="text" name="txtLname" id="txtLname" ng-model="txtLname" required>
<span style="color:red" ng-show="myForm.txtLname.$dirty && myForm.txtLname.$invalid">
<span ng-show="myForm.txtLname.$error.required">LastName is required.</span>
</span>
</div>
<div >
<label for="txtEmail">Email*</label>
<input type="email" name="txtEmail" id="txtEmail" ng-model="txtEmail" required>
<span style="color:red" ng-show="myForm.txtEmail.$dirty && myForm.txtEmail.$invalid">
<span ng-show="myForm.txtEmail.$error.required">Email is required.</span>
<span ng-show="myForm.txtEmail.$error.email">Invalid email address.</span>
</span>
</div>
<div >
<label for="txtMobile">Mobile*</label>
<input type="text" name="txtMobile" ng-minlength="10" id="txtMobile" ng-model="txtMobile" required>
<span style="color:red" ng-show="myForm.txtMobile.$dirty && myForm.txtMobile.$invalid">
<span ng-show="myForm.txtMobile.$error.required">Mobile is required.</span>
<span ng-show="myForm.txtMobile.$error.minlength">required 10 digits.</span>
</span>
</div>
<div >
<label for="txtAddress">Address*</label>
<pre name="txtAddress" id="txtAddress" ng-model="txtAddress" required></pre>
<span style="color:red" ng-show="myForm.txtAddress.$dirty && myForm.txtAddress.$invalid">
<span ng-show="myForm.txtAddress.$error.required">Address is required.</span>
</span>
</div>
<input type="submit" ng-disabled="myForm.$invalid">
</form>
<script>
var app = angular.module('myApp', []);
app.controller('validateCtrl', function($scope) {
});
</script>
</body>
</html>
Hope this code and post will helped you for implement AngularJS Form Validation Example – onlinecode. if you need any help or any feedback give it in comment section or you have good idea about this post you can give it comment section. Your comment will help us for help you more and improve us. we will give you this type of more interesting post in featured also so, For more interesting post and code Keep reading our blogs