AngularJS 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="~/Scripts/angular.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>

Try it

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.