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.

Directive

Description

novalidate

Sets disable the browser's default validation.

ng-required

Sets required attribute on an input field.

ng-minlength

Sets minlength attribute on an input field

ng-maxlength

Sets maxlength attribute on an input field.

ng-pattern

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

$error

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

$valid

Returns true if the model is valid

$invalid

Returns true if the model is invalid

$dirty

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

$touched

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

$untouched

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; ">
    <h2>User</h2>
    <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="employeeForm.email.$touched && employeeForm.email.$error.email">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="employeeForm.contact.$error.pattern">Not a valid Contact number!</span>
        <span ng-show="employeeForm.contact.$error.required">This field is required!</span>
        <p>
            <input type="submit"
                   ng-disabled="employeeForm.firstName.$dirty && employeeForm.firstName.$invalid ||
                   employeeForm.lastName.$dirty && employeeForm.lastName.$invalid ||
                   employeeForm.contact.$dirty && employeeForm.contact.$invalid ||
  employeeForm.email.$dirty && employeeForm.email.$invalid">
        </p>
    </form>
</div>
<script>
    var app = angular.module('myApp', []);
    app.controller('validateCtrl', function ($scope) {
        $scope.firstName = 'aditya';
        $scope.lastName = 'kumar';
        $scope.email = 'aditya@adityapoint.in';
        $scope.contact = '7798930250';
    });
</script>

OutPut:

validation in AngularJS


Thanks.

comments


Leave a comment

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

You may also like