In this tutorial we will learn how to use validation in angularjs with example.


AngularJS provide client-side form validation. It detect the state of the form and input fields (input, textarea, select), and lets you notify the user about the current state.It also holds the information about whether the input fields have been touched, or modified, or not.

AngularJS includes the following validation directives.




Sets disable the browser's default validation.


Sets required attribute on an input field.


Sets minlength attribute on an input field


Sets maxlength attribute on an input field.


Sets pattern validation error key if the ngModel value does not match the specified RegEx expression.


$error object contains all the validation attributes applied to the specified element.


Returns true if the model is valid


Returns true if the model is invalid


Returns true if user changed the value of model at least once


Returns true if the user has tabbed out from the control.


Returns true if the user has not tabbed out from the control.

Example: Form Validation

    ViewBag.Title = "User";
<script src="~/Scripts/jquery-3.1.1.js"></script>
<script src="~/Scripts/angular.js"></script>
<div ng-app="myApp" ng-controller="validateCtrl" style=" width:500px; margin:0 auto; ">
    <form name="employeeForm" novalidate>
        <label for="firstName">First Name: </label> <br />
        <input type="text" name="firstName" ng-model="firstName" ng-required="true" />
        <span ng-show="employeeForm.firstName.$touched && employeeForm.firstName.$error.required">First name is required.</span><br /><br />
        <label for="lastName">Last Name</label><br />
        <input type="text" name="lastName" ng-minlength="3" ng-maxlength="10" ng-model="lastName" />
        <span ng-show="employeeForm.lastName.$touched && employeeForm.lastName.$error.minlength">min 3 chars.</span>
        <span ng-show="employeeForm.lastName.$touched && employeeForm.lastName.$error.maxlength">Max 10 chars.</span><br /><br />
        <label for="dob">Email</label><br />
        <input type="email" id="email" ng-model="email" name="email" />
        <span ng-show="$touched &&$">Please enter valid email id.</span><br /><br />
        <label for="firstName">Contact: </label> <br />
        <input type="text" ng-model="contact" name="contact"
               ng-pattern="/^(\+\d{1,3}[- ]?)?\d{10}$/" required>
        <span ng-show="$error.pattern">Not a valid Contact number!</span>
        <span ng-show="$error.required">This field is required!</span>
            <input type="submit"
                   ng-disabled="employeeForm.firstName.$dirty && employeeForm.firstName.$invalid ||
                   employeeForm.lastName.$dirty && employeeForm.lastName.$invalid ||
         $dirty &&$invalid ||$dirty &&$invalid">
    var app = angular.module('myApp', []);
    app.controller('validateCtrl', function ($scope) {
        $scope.firstName = 'aditya';
        $scope.lastName = 'kumar';
        $ = '';
        $ = '7798930250';


validation in AngularJS


Leave a comment

Make sure you enter the (*) required information where indicated. HTML code is not allowed.

You may also like