AngularJS Validation In MVC - Part Three

Before starting the third part I recommend that you please go through the previous parts on AngularJS Validation:

• AngularJS Validation In MVC - Part One
• AngularJS Validation In MVC - Part Two

This part will teach you how to,

1. Apply CSS to validation message
2. Disable or enable the button depending on validation message
3. Change the color of controls as per validation

Initial requirement is reference

<script src="~/Scripts/angular.js"></script>

1. Apply CSS to validation message
   
   i. Below CSS will help you to apply css to the validation message,
   

   .ValidationMessage {
   color: red;
   font-size: x-small;
   }

   And to the control of message apply below way,
   

<span class="ValidationMessage" ng-show="myForm.email.$dirty && myForm.email.$invalid">
                <br />
                <span ng-show="myForm.email.$error.required">Email is required.</span>
                <span ng-show="myForm.email.$error.email">Invalid email address.</span>
            </span>

2. Disable or enable the save button depending on validation
   
   By below way you can enable / disable the save button control on validation,
   

   <button ng-disabled="myForm.$invalid">Save</button>

3. Change the controls as per validation.
   
   For Invalid control CSS is,
   

   input.ng-invalid {
   background-color: pink;
   }

   For valid control CSS is,
   

   input.ng-valid {
   background-color: lightgreen;
   }

My final code will look like as below,

<script src="~/Scripts/angular.js"></script>
<form ng-app="myApp" ng-controller="validateCtrl"
      name="myForm" novalidate style="width: 470px;margin: 0 auto;border:medium;margin-top:10%">
    <fieldset>
        <legend>Validation Demo</legend>

        <p>
            Student Roll Number:<br>
            <input type="number" name="StudentRollNumber" ng-model="StudentRollNumber" required>

            <span class="ValidationMessage" ng-show="myForm.StudentRollNumber.$dirty && myForm.StudentRollNumber.$invalid">
                <br />
                <span ng-show="myForm.StudentRollNumber.$error.required">Student Roll Number is required.</span>
                <span ng-show="myForm.StudentRollNumber.$error.number">Not valid number!</span>
            </span>
        </p>


        <p>
            Student Name:<br>
            <input type="text" name="Student" ng-model="Student" required>
            <span class="ValidationMessage" ng-show="myForm.Student.$dirty && myForm.Student.$invalid">
                <br />
                <span ng-show="myForm.Student.$error.required">Student Name is required.</span>
            </span>
        </p>

        <p>
            Student Birth Date:<br>
            <input type="date" name="BirthDate" ng-model="BirthDate" required placeholder="yyyy-MM-dd">
            <span class="ValidationMessage" ng-show="myForm.BirthDate.$dirty && myForm.BirthDate.$invalid">
                <br />
                <span ng-show="myForm.BirthDate.$error.required">Student Birth Date is required.</span>
                <span ng-show="myForm.BirthDate.$error.date">Not a Valid Date.</span>
            </span>
        </p>



        <p>
            Student Email:<br>
            <input type="email" name="email" ng-model="email" required>
            <span class="ValidationMessage" ng-show="myForm.email.$dirty && myForm.email.$invalid">
                <br />
                <span ng-show="myForm.email.$error.required">Email is required.</span>
                <span ng-show="myForm.email.$error.email">Invalid email address.</span>
            </span>
        </p>



        <p>
            Student Percentage Marks:<br>
            <input type="number" name="marks" ng-model="marks" max="100" required>
            <span class="ValidationMessage" ng-show="myForm.marks.$dirty && myForm.marks.$invalid">
                <br />
                <span ng-show="myForm.marks.$error.required">Email is required.</span>
                <span ng-show="myForm.marks.$error.number">Invalid number.</span>
                <span ng-show="myForm.marks.$error.max">Max Percentage is 100.</span>
            </span>
        </p>


        <br><br>
        <button ng-disabled="myForm.$invalid">Save</button>

        <p>
    </fieldset>
</form>

<script>
        var app = angular.module('myApp', []);
        app.controller('validateCtrl', function ($scope) {
            StudentRollNumber = 12;
            BirthDate = new Date(2013, 9, 22);
        });
</script>

<style>
    input.ng-invalid {
        background-color: pink;
    }

    input.ng-valid {
        background-color: lightgreen;
    }

    form.ng-pristine {
        background-color: lightblue;
    }

    .ValidationMessage {
        color: red;
        font-size: x-small;
    }
</style>

Run your application you will find the error message working as below, 

1. Invalid State : Check the CSS of message,
   
   
2. Valid state control CSS will looks as below,
   
   
   And in valid state Save button will get enabled.

So by this way you can apply the CSS , you can change the color of the control in invalid state as well as valid state and Enable or disable the control in valid state.

Read more articles on AngularJS:

 

.Net Serialization using Soap Formatter