bing
Flat 10% & upto 50% off + Free additional Courses. Hurry up!

AngularJS Validation

 

Forms and controls in AngularJS give validation services and inform users of invalid input. AngularJS provides us different information about a form or its inputs and are applied to a form and inputs.

To track error following terms are used:

  • $dirty− states that value has been altered.
  • $error− states the exact error.
  • $invalid− states that value entered is invalid.

e.g.

<!DOCTYPE html>

<html>

<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>

<body>

<h1>Example of Validation</h1>

<form ng-app="myApp" ng-controller="validateCtrl"

name="intellipaatForm" novalidate>

<p>Username:<br>

<input type="text" name="username" ng-model="username" required>

<span style="color:red" ng-show="intellipaatForm.username.$dirty && intellipaatForm.username.$invalid">

<span ng-show="intellipaatForm.username.$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="intellipaatForm.email.$dirty && intellipaatForm.email.$invalid">

<span ng-show="intellipaatForm.email.$error.required">Email is required.</span>

<span ng-show="intellipaatForm.email.$error.email">Invalid email address.</span>

</span>

</p>

<p>

<input type="submit"

ng-disabled="intellipaatForm.username.$dirty && intellipaatForm.username.$invalid ||

intellipaatForm.email.$dirty && intellipaatForm.email.$invalid">

</p>

</form>

<script>

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

app.controller('validateCtrl', function($scope) {

$scope.username = 'abc';

$scope.email = 'abc@intellipaat.com';

});

</script>

</body>

</html>

Output

o18

If you remove the name of id from the text box it shows following output:

o19

"0 Responses on AngularJS Validation"

Training in Cities

Bangalore, Hyderabad, Chennai, Delhi, Kolkata, UK, London, Chicago, San Francisco, Dallas, Washington, New York, Orlando, Boston

100% Secure Payments. All major credit & debit cards accepted Or Pay by Paypal.

top

Sales Offer

  • To avail this offer, enroll before 04th December 2016.
  • This offer cannot be combined with any other offer.
  • This offer is valid on selected courses only.
  • Please use coupon codes mentioned below to avail the offer
offer-june

Sign Up or Login to view the Free AngularJS Validation.