Angular JS Form Validation


This is an example of Sign in form.
Download angular.min.js,, angular-messages.min.js,

<!DOCTYPE html>
  <body ng-app="myapp">
     <form action="/login" method="post" name="signinForm" novalidate>
        <input type="text" class="form-control" name="email" placeholder="email" type="email" ng-model="email" required ng-maxlength="50" ng-minlength="4"/><br/>
        <input type="password" class="form-control" name="password" placeholder="password" ng-model="password" required />
        <div class="form-group">
          <input id="submit" type="submit" value="Sign in" class="btn btn-primary pull-right" ng-disabled="signinForm.$invalid"/>
        <div ng-messages="$error" ng-if="$touched">
        <div ng-message="required" class="errormesage">Please input email</div>
        <div ng-message="minlength" class="errormesage">Please input email more than 4</div>
        <div ng-message="maxlength" class="errormesage">Please input email less than 50</div>
        <div ng-messages="$error" ng-if="signinForm.password.$touched">
           <div ng-message="required" class="errormesage">Please input password</div>

You need to add name attribute of form.
To avoid conflict with HTML5 validation, add novalidate

To show error message, we use ng-messages