Bootstrap CSS Classes for Styling Validation Messages:

In the previous section, we applied AngularJS built-in CSS classes to a form. Here, we will apply bootstrap CSS classes for styling form field error, warning, or validity.

Bootstrap includes following CSS classes for the form validation.

Bootstrap CSS Class	Description
has-error	Set this CSS class when a form field becomes invalid based on applied validation attributes.
has-warning	Set this CSS class to display warning for a form field.
has-success	Set this CSS class when a form field becomes valid based on applied validation attributes.

The following is a student form with bootstrap validation classes.

Example: AngularJS form with bootstrap validation CSS classes


<!DOCTYPE html>
<html>
<head>
    <link href="~/Content/bootstrap.css" rel="stylesheet" />
    <script src="~/Scripts/angular.js"></script>
</head>
<body ng-app class="container">
    <br />
    <form class="form-horizontal" ng-submit="submitStudnetForm()" role="form" name="studentForm" novalidate>
        <div class="form-group" ng-class="{'has-error': studentForm.firstName.$touched && studentForm.firstName.$error.required , 'has-success': studentForm.firstName.$valid }">
            <label for="firstName" class="col-sm-3 control-label">First Name</label>
            <div class="col-sm-6">
                <input type="text" id="firstName" name="firstName" class="form-control" ng-model="firstName" required />
            </div>
            <div class="col-sm-3">
                <span class="help-block" ng-show="studentForm.firstName.$touched && studentForm.firstName.$error.required">Please enter First Name.</span>
            </div>

        </div>
        <div class="form-group" ng-class="{'has-error': studentForm.lastName.$touched && studentForm.lastName.$error.required ,  'has-success': studentForm.lastName.$valid}">
            <label for=" lastname" class="col-sm-3 control-label">
                Last Name
            </label>
            <div class="col-sm-6">
                <input type="text" id="lastName" name="lastName" class="form-control" ng-model="lastName" required />
            </div>
            <div class="col-sm-3">
                <span class="help-block" ng-show="studentForm.lastName.$touched && studentForm.lastName.$error.required">Please enter Last Name.</span>
            </div>
        </div>
        <div class="form-group" ng-class="{'has-error': studentForm.emailId.$touched && studentForm.emailId.$error.email , 'has-success': studentForm.emailId.$valid}">
            <label for="dob" class="col-sm-3 control-label">Email</label>
            <div class="col-sm-6">
                <input type="email" id="dob" name="emailId" class="form-control" ng-model="email" />
            </div>
            <div class="col-sm-3">
                <span class="help-block" ng-show="studentForm.emailId.$touched && studentForm.emailId.$error.email">Please enter valid email.</span>
            </div>
        </div>
        
        <input type="submit" value="Save" class="btn btn-primary col-sm-offset-3" />
        <input type="button" value="Reset" class="btn" />
    </form>
</body>
</html>

Try it

In the above example, we have applied ng-class directive to each <div> element with CSS class name and an expression. If an expression evaluates to true then specified CSS class will be applied.