ittutorial : php tutorial, tutorials for jquery, javascript, ajax and more

AngularJs Tutorials

Important News

Home » PHP » AngularJs Validation

Angularjs Validations

File name : index.php

<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>

<form ng-app="" name="myForm">
Email:
<input type="email" name="myAddress" ng-model="text">
<span ng-show="myForm.myAddress.$error.email">Not a valid e-mail address</span>
</form>

<p>Enter your e-mail address in the input field. AngularJS will display an errormessage if the address is not an e-mail.</p>

</body>
</html>

File name : index.php

<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>

<form ng-app="" name="myForm" ng-init="myText = 'post@myweb.com'">

Email:
<input type="email" name="myAddress" ng-model="myText" required>
<p>Edit the e-mail address, and try to change the status.</p>
<h1>Status</h1>
<p>Valid: {{myForm.myAddress.$valid}} (if true, the value meets all criteria).</p>
<p>Dirty: {{myForm.myAddress.$dirty}} (if true, the value has been changed).</p>
<p>Touched: {{myForm.myAddress.$touched}} (if true, the field has been in focus).</p>

</form>

</body>
</html>

CSS Classes

The ng-model directive provides CSS classes for HTML elements, depending on their status:

File name : index.php

<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<style>
input.ng-invalid {
background-color: lightblue;
}
</style>
<body>

<form ng-app="" name="myForm">
Enter your name:
<input name="myName" ng-model="myText" required>
</form>

<p>Edit the text field and it will get/lose classes according to the status.</p>
<p><b>Note:</b> A text field with the "required" attribute is not valid when it is empty.</p>

</body>
</html>

File name : index.php

<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>

<div ng-app="myApp" ng-controller="myCtrl">
<h1 ng-click="changeName()">{{firstname}}</h1>
</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.firstname = "John";
$scope.changeName = function() {
$scope.firstname = "Nelly";
}
});
</script>

<p>Click on the header to run the "changeName" function.</p>

<p>This example demonstrates how to use the controller to change model data.</p>

</body>
</html>

Required

Use the HTML5 attribute required to specify that the input field must be filled out:

File name : index.php

<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body ng-app="">

<p>Try writing in the input field:</p>

<form name="myForm">
<input name="myInput" ng-model="myInput" required>
</form>

<p>The input's valid state is:</p>
<h1>{{myForm.myInput.$valid}}</h1>

</body>
</html>

File name : index.php

<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body ng-app="">

<p>Try leaving the first input field blank:</p>

<form name="myForm">
<p>Name:
<input name="myName" ng-model="myName" required>
<span ng-show="myForm.myName.$touched && myForm.myName.$invalid">The name is required.</span>
</p>

<p>Adress:
<input name="myAddress" ng-model="myAddress" required>
</p>

</form>

<p>We use the ng-show directive to only show the error message if the field has been touched AND is empty.</p>

</body>
</html>

Email Validation

File name : index.php

<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body ng-app="">

<p>Try writing an E-mail address in the input field:</p>

<form name="myForm">
<input type="email" name="myInput" ng-model="myInput">
</form>

<p>The input's valid state is:</p>
<h1>{{myForm.myInput.$valid}}</h1>
<p>Note that the state of the input field is "true" before you start writing in it, even if it does not contain an e-mail address.</p>

</body>
</html>

Form State and Input State

Input fields have the following states:

$untouched The field has not been touched yet

$touched The field has been touched

$pristine The field has not been modified yet

$dirty The field has been modified

$invalid The field content is not valid

$valid The field content is valid

all properties of the input field, and are either true or false.

Forms have the following states:

$pristine No fields have been modified yet

$dirty One or more have been modified

$invalid The form content is not valid

$valid The form content is valid

$submitted The form is submitted

They are all properties of the form, and are either true or false.

File name : index.php

CSS Classes

The following classes are added to, or removed from, input fields:

ng-untouched The field has not been touched yet

ng-touched The field has been touched

ng-pristine The field has not been modified yet

ng-dirty The field has been modified

ng-valid The field content is valid

ng-invalid The field content is not valid

ng-valid-key One key for each validation. Example: ng-valid-required, useful when there are more than one thing that must be validated

ng-invalid-key Example: ng-invalid-required

The following classes are added to, or removed from, forms:

Forms have the following states:

ng-pristine No fields has not been modified yet

ng-dirty One or more fields has been modified

ng-valid The form content is valid

ng-invalid The form content is not valid

ng-valid-key One key for each validation. Example: ng-valid-required, useful when there are more than one thing that must be validated

ng-invalid-key Example: ng-invalid-required

File name : index.php

<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<style>
input.ng-invalid {
background-color:pink;
}
input.ng-valid {
background-color:lightgreen;
}
</style>
<body ng-app="">

<p>Try writing in the input field:</p>

<form name="myForm">
<input name="myName" ng-model="myName" required>
</form>

<p>The input field requires content, and will therefore become green when you write in it.</p>

</body>
</html>

File name : index.php

<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<style>
form.ng-pristine {
background-color:lightblue;
}
form.ng-dirty {
background-color:pink;
}
</style>
<body ng-app="">

<form name="myForm">
<p>Try writing in the input field:</p>

<input name="myName" ng-model="myName" required>

<p>The form gets a "ng-dirty" class when the form has been modified, and will therefore turn pink.</p>
</form>

</body>
</html>

custom validation

File name : index.php

<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>

<h2>Validation Example</h2>

<form ng-app="myApp" ng-controller="validateCtrl"
name="myForm" novalidate>

<p>Username:<br>
<input type="text" name="user" ng-model="user" required>
<span style="color:red" ng-show="myForm.user.$dirty && myForm.user.$invalid">
<span ng-show="myForm.user.$error.required">Username is required.</span>
</span>
</p>

<p>Email:<br>
<input type="email" name="email" ng-model="email" 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>
</p>

<p>
<input type="submit"
ng-disabled="myForm.user.$dirty && myForm.user.$invalid ||
myForm.email.$dirty && myForm.email.$invalid">
</p>

</form>

<script>
var app = angular.module('myApp', []);
app.controller('validateCtrl', function($scope) {
$scope.user = 'John Doe';
$scope.email = 'john.doe@gmail.com';
});
</script>

</body>
</html>

Custom form validation

File name : index.php

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>ngMessages demo</title>
<link rel='stylesheet' href='style.css' type='text/css' media='all' />
</head>
<body ng-app="app">

<form name="exampleForm" class="elegant-aero">
<label>First Name:</label>
<input type="text" name="userFirstName" ng-model="firstName" required />
<div ng-messages="exampleForm.userFirstName.$error">
<div ng-message="required">This field is required</div>
</div>

<label>Last Name:</label>
<input type="text" name="userLastName" ng-model="lastName" required />
<div ng-messages="exampleForm.userLastName.$error">
<div ng-message="required">This field is required</div>
</div>

<label>Email Address:</label>
<input type="email" name="userEmail" ng-model="email" required />
<div ng-messages="exampleForm.userEmail.$error">
<div ng-message="required">This field is required</div>
<div ng-message="email">Your email address is invalid</div>
</div>

<label>Phone Number:</label>
<input type="email" name="userPhoneNumber" ng-model="phoneNumber" ng-pattern="/^[\+]?[(]?[0-9]{3}[)]?[-\s\.]?[0-9]{3}[-\s\.]?[0-9]{4,6}$/" required/>
<div ng-messages="exampleForm.userPhoneNumber.$error">
<div ng-message="required">This field is required</div>
<div ng-message="pattern">Must be a valid 10 digit phone number</div>
</div>

<label>User Message:</label>
<textarea type="text" name="userMessage" class="form-control" rows="4" ng-model="message" ng-minlength="100" ng-maxlength="1000" required></textarea>
<div ng-messages="exampleForm.userMessage.$error">
<div ng-message="required">This field is required</div>
<div ng-message="minlength">Message must be over 100 characters</div>
<div ng-message="maxlength">Message must not exceed 1000 characters</div>
</div>
</form>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.4/angular-messages.min.js"></script>
<script src="app.js"></script>
</body>
</html>

File name : app.js

var app = angular.module('app', ['ngMessages']);

File name : index.php

<!DOCTYPE html>
<html>
<head>

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" />
<style>
body { padding-top:30px; }
</style>


<script src="https://code.angularjs.org/1.4.0-rc.1/angular.js"></script>
<script src="app.js"></script>
</head>
<body ng-app="validationApp" ng-controller="mainController">
<div class="container">


<div class="page-header"><h1>AngularJS Form Validation</h1></div>






<form name="userForm" ng-submit="submitForm(userForm.$valid)" novalidate>


<div class="form-group" ng-class="{ 'has-error' : userForm.name.$invalid && !userForm.name.$pristine }">
<label>Name*</label>
<input type="text" name="name" class="form-control" ng-model="user.name" required>
<p ng-show="userForm.name.$invalid && !userForm.name.$pristine" class="help-block">You name is required.</p>
</div>


<div class="form-group" ng-class="{ 'has-error' : userForm.username.$invalid && !userForm.username.$pristine }">
<label>Username</label>
<input type="text" name="username" class="form-control" ng-model="user.username" ng-minlength="3" ng-maxlength="8">
<p ng-show="userForm.username.$error.minlength" class="help-block">Username is too short.</p>
<p ng-show="userForm.username.$error.maxlength" class="help-block">Username is too long.</p>
</div>


<div class="form-group" ng-class="{ 'has-error' : userForm.email.$invalid && !userForm.email.$pristine }">
<label>Email</label>
<input type="email" name="email" class="form-control" ng-model="user.email">
<p ng-show="userForm.email.$invalid && !userForm.email.$pristine" class="help-block">Enter a valid email.</p>
</div>

<button type="submit" class="btn btn-primary">Submit</button>

</form>




<div class="page-header"><h1>Validation Tables</h1></div>

<div class="row">
<div class="col-xs-3">
<h3>Form</h3>
<table class="table table-bordered">
<tbody>
<tr>
<td ng-class="{ success: userForm.$valid, danger: userForm.$invalid }">Valid</td>
</tr>
<tr>
<td ng-class="{ success: userForm.$pristine, danger: !userForm.$pristine }">Pristine</td>
</tr>
<tr>
<td ng-class="{ success: userForm.$dirty }">Dirty</td>
</tr>
</tbody>
</table>
</div>
<div class="col-xs-3">
<h3>Name</h3>
<table class="table table-bordered">
<tbody>
<tr>
<td ng-class="{ success: userForm.name.$valid, danger: userForm.name.$invalid }">Valid</td>
</tr>
<tr>
<td ng-class="{ success: userForm.name.$pristine, danger: !userForm.name.$pristine }">Pristine</td>
</tr>
<tr>
<td ng-class="{ success: userForm.name.$dirty }">Dirty</td>
</tr>
<tr>
<td ng-class="{ success: userForm.name.$touched }">Touched</td>
</tr>
</tbody>
</table>
</div>
<div class="col-xs-3">
<h3>Username</h3>
<table class="table table-bordered">
<tbody>
<tr>
<td ng-class="{ success: userForm.username.$valid, danger: userForm.username.$invalid }">Valid</td>
</tr>
<tr>
<td ng-class="{ success: userForm.username.$pristine, danger: !userForm.username.$pristine }">Pristine</td>
</tr>
<tr>
<td ng-class="{ success: userForm.username.$dirty }">Dirty</td>
</tr>
<tr>
<td ng-class="{ success: userForm.username.$touched }">Touched</td>
</tr>
</tbody>
</table>
</div>
<div class="col-xs-3">
<h3>Email</h3>
<table class="table table-bordered">
<tbody>
<tr>
<td ng-class="{ success: userForm.email.$valid, danger: userForm.email.$invalid }">Valid</td>
</tr>
<tr>
<td ng-class="{ success: userForm.email.$pristine, danger: !userForm.email.$pristine }">Pristine</td>
</tr>
<tr>
<td ng-class="{ success: userForm.email.$dirty }">Dirty</td>
</tr>
<tr>
<td ng-class="{ success: userForm.email.$touched }">Touched</td>
</tr>
</tbody>
</table>
</div>
</div>

</div>
</body>
</html>

File name : index.php

Itechtuto

AngularJs Tutorials

Important News

Angularjs Validations

File name : index.php

File name : index.php

CSS Classes

File name : index.php

File name : index.php

Required

File name : index.php

File name : index.php

Email Validation

File name : index.php

Form State and Input State

File name : index.php

CSS Classes

The following classes are added to, or removed from, forms:

File name : index.php

File name : index.php

custom validation

File name : index.php

Custom form validation

File name : index.php

File name : app.js

File name : index.php

File name : index.php

File name : index.php

Connect Us Socially:

Quick Links