Validation CSS Classes

AngularJS includes following CSS classes to allow styling of form and input controls based on the state of form field.


CSS Class

Description

ng-valid

Angular will set this CSS class if the input field is valid without errors.

ng-invalid

Angular will set this CSS class if the input does not pass validations.

ng-pristine

Angular will set this CSS class if a user has not interacted with the control yet.

ng-dirty

Angular will set this CSS class if the value of form field has been changed.

ng-touched

Angular will set this CSS class if a user tabbed out from the input control.

ng-untouched

Angular will set this CSS class if a user has not tabbed out from the input control.

ng-submitted

Angular will set this CSS class if the form has been submitted.

Note that you must provide implementation of these CSS classes and include in your CSS file. AngularJS automatically includes these classes based on the current state of input controls.
The following example demonstrates ng-pristine, ng-touched, ng-valid, and ng-invalid classes to display validity of each form control.
Example: AngularJS Validation CSS Classes.
<!DOCTYPE html>
<html>
<head>
<script src="angular.min.js"></script>
<style>
input.ng-pristine {
background-color:yellow;
}

        input.ng-touched.ng-invalid {
background-color:red;
}

        input.ng-touched.ng-valid {
background-color:green;
}

</style>
</head>
<body ng-app>
<form name="studentForm" novalidate class="student-form">
<label for="firstName">First Name: </label> <br />
<input type="text" name="firstName" ng-model="firstName" ng-required="true" />
<span ng-show="studentForm.firstName.$touched && studentForm.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="studentForm.lastName.$touched && studentForm.lastName.$error.minlength">min 3 chars.</span>
<span ng-show="studentForm.lastName.$touched && studentForm.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="studentForm.email.$touched && studentForm.email.$error.email">Please enter valid email id.</span><br /><br />
<input type="submit" value="Save" />
</form>
</body>
</html>

In the above example, initially all the controls will have yellow background. If a user enters a valid value then it will change the background color to green, otherwise it will turn to red if there is a validation error.

 

For
More Explanation
&
Online Classes

Contact Us:
+919885348743