Angular JS Form Validation
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