Angular JS Form Validation

Posted by On 8月 31, 2015 0 Comment

Example

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

<!DOCTYPE html>
<html>
  <head>
     <title>Angular</title>
  </head>
  <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 />
        <br>
        <div class="form-group">
          <input id="submit" type="submit" value="Sign in" class="btn btn-primary pull-right" ng-disabled="signinForm.$invalid"/>
        </div>
        <div ng-messages="signinForm.email.$error" ng-if="signinForm.email.$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>
        <div ng-messages="signinForm.email.$error" ng-if="signinForm.password.$touched">
           <div ng-message="required" class="errormesage">Please input password</div>
        </div>
     </form>
  </body>
</html>

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

To show error message, we use ng-messages

TOPICS