AngularJS Forms Validation
AngularJS support client end validation, means you can validate an input data in the client Browser before accepting.
Beside validating ,AngularJS offer validate status of form and input controls. AngularJS monitor each activity of client , set the status of the control and form accordingly.
The form has three mostly used status.
The control has several status as below.
HTMl5 attribute "required" , means that field must be filled by the client.You have to add this attribute the control , that you want to validate.
Below is the example of control (field & email) validation
Example
Output
Below is the example of Form validation with control(field & email) validation
Custom validation
AngularJS offer validation to be Customized as per user. Below is example of custom validation.
Example
CSS Classes
You can add CSS classes to forms and control with their states.
Below example show , how we can add css with states.
Example
AngularJS support client end validation, means you can validate an input data in the client Browser before accepting.
Beside validating ,AngularJS offer validate status of form and input controls. AngularJS monitor each activity of client , set the status of the control and form accordingly.
The form has three mostly used status.
- $dirty - Inform that value has been changed.
- $invalid - Inform that invalid value entered.
- $error - states the exact error.
The control has several status as below.
- $untouched - The control has not been touched yet
- $touched - The control has been touched
- $pristine - The control has not been modified yet
- $dirty - The control has been modified
- $invalid - The control content is not valid
- $valid - The control content is valid
HTMl5 attribute "required" , means that field must be filled by the client.You have to add this attribute the control , that you want to validate.
Below is the example of control (field & email) validation
Example
<html>
<head>
<title>AngularJS Example of Control Validation </title>
<script
src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js">
</script>
</head>
<script>
var
App = angular.module("myApp",
[]);
App.controller('myController',
function
($scope)
{
});
</script>
<body
ng-app="myApp"
ng-controller="myController">
<h1>
AngularJS
Required Field Validation</h1>
<form
name="myForm">
<table
border="0">
<tr>
<td>
Enter
Name:
</td>
<td>
<input
name="name"
type="text"
ng-model="myName"
required>
<span
style="color:
red"
ng-show="myForm.name.$dirty
&& myForm.name.$invalid">
<span
ng-show="myForm.name.$error.required">First
Name is required.</span>
</span>
</td>
</tr>
<tr>
<td>
Email:
</td>
<td>
<input
name="email"
type="email"
ng-model="email"
length="100"
required>
<span
style="color:
red"
ng-show="myForm.email.$dirty
&& myForm.email.$invalid">
<span
ng-show="myForm.email.$error.required">Email
is required.</span>
<span
ng-show="myForm.email.$error.email">Invalid
email address.</span>
</span>
</td>
</tr>
</table>
</form>
</body>
</html>
Output
Below is the example of Form validation with control(field & email) validation
<html>
<head>
<title>AngularJS Example of Control & Form Validation </title>
<script
src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js">
</script>
</head>
<script>
var
App = angular.module("myApp",
[]);
App.controller('myController',
function
($scope)
{
});
</script>
<body
ng-app="myApp"
ng-controller="myController">
<h1>
AngularJS
Required Field Validation</h1>
<form
name="myForm">
<table
border="0">
<tr>
<td>
Enter
Name:
</td>
<td>
<input
name="name"
type="text"
ng-model="myName"
required>
<span
style="color:
red"
ng-show="myForm.name.$dirty
&& myForm.name.$invalid">
<span
ng-show="myForm.name.$error.required">First
Name is required.</span>
</span>
</td>
</tr>
<tr>
<td>
Email:
</td>
<td>
<input
name="email"
type="email"
ng-model="email"
length="100"
required>
<span
style="color:
red"
ng-show="myForm.email.$dirty
&& myForm.email.$invalid">
<span
ng-show="myForm.email.$error.required">Email
is required.</span>
<span
ng-show="myForm.email.$error.email">Invalid
email address.</span>
</span>
</td>
</tr>
<tr>
<td
colspan="2">
<button
ng-disabled="myForm.myName.$dirty
&&
myForm.myName.$invalid"
>Submit</button>
</td>
</tr>
</table>
</form>
</body>
</html>
Output :
Custom validation
AngularJS offer validation to be Customized as per user. Below is example of custom validation.
Example
<html>
<head>
<title>AngularJS Example Custom Validation </title>
<script
src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js">
</script>
</head>
<script>
var
app = angular.module("myApp",
[]);
app.directive('regnumber',
function
()
{
return
{
require:
'ngModel',
link:
function
(scope, element, attributes, control)
{
control.$validators.adult
= function
(modelValue, viewValue)
{
var
ln = viewValue.length;
if
(ln==4)
{
return
true;
}
return
false;
//
wrong value
};
}
};
});
</script>
<div
ng-app="myApp">
<form
novalidate
name="myForm">
Your
age: <input
type="number"
name="txtAge"
ng-model="myRegNumber"
regnumber
/>
<span
style="color:red;"
ng-show="myForm.txtAge.$error.adult">Enter
4 digit Registration Number only.</span>
</form>
</div>
Output :
CSS Classes
You can add CSS classes to forms and control with their states.
Below example show , how we can add css with states.
Example
<html>
<head>
<title>AngularJS
CSS Classes & States</title>
<script
src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js">
</script>
</head>
<script>
var
App = angular.module("myApp",
[]);
App.controller('myController',
function
($scope)
{
});
</script>
<style>
input.ng-invalid
{
background-color
:#F18D00;
}
input.ng-valid
{
background-color:#93CCD7;
}
</style>
<body
ng-app="myApp"
ng-controller="myController">
<h1>
AngularJS
Required Field Validation</h1>
<form
name="myForm">
<table
border="0">
<tr>
<td>
Enter
Name:
</td>
<td>
<input
name="name"
type="text"
ng-model="myName"
required>
<span
style="color:
red"
ng-show="myForm.name.$dirty
&& myForm.name.$invalid"><span
ng-show="myForm.name.$error.required">First
Name is required.</span>
</span>
</td>
</tr>
<tr>
<td>
Email:
</td>
<td>
<input
name="email"
type="email"
ng-model="email"
length="100"
required>
<span
style="color:
red"
ng-show="myForm.email.$dirty
&& myForm.email.$invalid"><span
ng-show="myForm.email.$error.required">Email
is required.</span>
<span
ng- show="myForm.email.$error.email">
Invalid
email address.</span>
</span>
</td>
</tr>
</table>
</form>
</body>
</html>
Output :
No comments:
Post a Comment