Hello guys,
I am writing a blog to validate the HTML form by angularJS.

We can validate the many thing by angularJs on real time basis for example-
required field, maximum length, minimum lenght and text pattern etc..

Now, create a form in HTML page as below :

<form name="testForm" novalidate>
<label>Text:
          <input type="text"
                 name="formText"
                 required
                 ng-model="formTextValue"
                 ng-minlength="3"
                 ng-maxlength="10"
                 ng-pattern="/^[A-Z0-9]+$/" />
        </label><br />
        <strong>State:</strong> {{getItemState(testForm.formText)}}<br />

        <strong>Error messages:</strong><br />
        <div ng-if="testForm.formText.$error.required">This field is required<br /></div>
        <div ng-if="testForm.formText.$error.minlength">The text is too short<br /></div>
        <div ng-if="testForm.formText.$error.maxlength">The text is too long<br /></div>
        <div ng-if="testForm.formText.$error.pattern">Invalid text format<br /></div>
        <div ng-if="testForm.formText.$valid">No errors<br /></div>
        <strong>Error:</strong><br />
        <textarea>{{getItemError(testForm.formText) | json}}</textarea><br />
        <br />
</form>

Create a index.html page and put form data and below script link :

<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
  <script src="script.js"></script>

For validation script, create a script.js and put below code :

angular.module("mainModule", [])
  .controller("mainController", function ($scope)
  {
    $scope.person = {
      firstName: null,
      lastName: null
    };

    $scope.getItemState = function (item)
    {
      if (item.$valid)
      {
        return "valid";
      }
      else if (item.$invalid)
      {
        return "invalid";
      }
      else
      {
        return "";
      }
    };

    $scope.getItemError = function (item)
    {
      if (item.$invalid)
      {
        return item.$error;
      }
      else
      {
        return null;
      }
    };

    $scope.getValidationCSSClass = function (item)
    {
      // We show an error only if the item has been modified
      // at least once to avoid displaying errors as soon as
      // the form is loaded (we wait for the user to interact
      // with the controls before declaring them invalid).
      return {
        invalidItem: item.$invalid && item.$dirty
      };
    };

    $scope.getValidationError = function (item)
    {
      // We show an error only if the item has been modified
      // at least once to avoid displaying errors as soon as
      // the form is loaded (we wait for the user to interact
      // with the controls before declaring them invalid).
      if (item.$dirty && item.$error.required)
      {
        return "Required field";
      }
      else
      {
        return "";
      }
    };
  });