AngularJS Form Validation

Submitted by: 
Language: 
Visitors have accessed this post 255 times.

Getting Started

I've used CDN for Bootstrap and Angular JS in this tutorial so you need internet connection for them to work.

Form and Input State

This our the states in Angular JS.

  • $untouched The field has not been touched yet
  • $touched The field has been touched
  • $pristine The field has not been modified yet
  • $dirty The field has been modified
  • $invalid The field content is not valid
  • $valid The field content is valid

Reference: w3schools.com

Validation Rules used in this tutorial

  • email - The input should in email format
  • url - The input should be a url
  • required - The input field should not be empty
  • ng-minlength - Input must be greater than or equal to the set value
  • ng-maxlength - Input must be less than or equal to the set value
  • ng-pattern - The input should look like the set pattern (in this case of this tutorial, the input should follow to set REGEX format)

index.html

This is our index that contains our form and validations.

  1. <!DOCTYPE html>
  2. <html lang="en" ng-app="app">
  3. <meta charset="utf-8">
  4. <title>AngularJS Form Validation</title>
  5. <link href="<a href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"" rel="nofollow">https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"</a> rel="stylesheet">
  6. <script src="<a href="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
  7. " rel="nofollow">http://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></s...</a> <style type="text/css">
  8. .errortext{
  9. color:red;
  10. }
  11. </style>
  12. </head>
  13. <body ng-controller="myController">
  14. <div class="container">
  15. <h1 class="page-header text-center">AngularJS Form Validation</h1>
  16. <div class="col-md-6 col-md-offset-3">
  17. <div class="login-panel panel panel-primary">
  18. <div class="panel-heading">
  19. <h3 class="panel-title"> Validation Form</h3>
  20. </div>
  21. <div class="panel-body">
  22. <form role="form" name="myForm" novalidate>
  23. <div class="form-group">
  24. <input type="text" class="form-control" name="username" placeholder="Username" ng-minlength="10" ng-maxlength="30" ng-pattern="/^[a-zA-Z0-9_]*$/" ng-model="user.username" required autofocus>
  25. <div class="errortext" ng-show="myForm.username.$dirty && myForm.username.$invalid">
  26. <span ng-show="myForm.username.$error.required">Username is required</span>
  27. <span ng-show="myForm.username.$error.minlength">Username must contain atleast 10 characters</span>
  28. <span ng-show="myForm.username.$error.maxlength">Username should not be greater than 30 characters</span>
  29. <span ng-show="myForm.username.$error.pattern && !myForm.username.$error.minlength && !myForm.username.$error.maxlength">Only letters, numbers and underscore allowed</span>
  30. </div>
  31. </div>
  32. <div class="form-group">
  33. <input type="password" class="form-control" name="password" placeholder="Password" ng-model="user.password" required>
  34. <div class="errortext" ng-show="myForm.password.$dirty && myForm.password.$invalid">
  35. <span ng-show="myForm.password.$error.required">Password is required</span>
  36. </div>
  37. </div>
  38. <div class="form-group">
  39. <input type="password" class="form-control" name="repassword" placeholder="Re-type Password" ng-model="user.repassword" required>
  40. <div class="errortext" ng-show="myForm.repassword.$dirty && myForm.repassword.$invalid || myForm.repassword.$dirty && user.repassword != user.password">
  41. <span ng-show="myForm.repassword.$error.required">Re-type password is required</span>
  42. <span ng-show="!myForm.repassword.$error.required && user.repassword != user.password">Password did not match</span>
  43. </div>
  44. </div>
  45. <div class="form-group">
  46. <input type="email" class="form-control" name="email" placeholder="Email" ng-model="user.email" required>
  47. <div class="errortext" ng-show="myForm.email.$dirty && myForm.email.$invalid">
  48. <span ng-show="myForm.email.$error.required">Email is required</span>
  49. <span ng-show="myForm.email.$error.email">Invalid email format</span>
  50. </div>
  51. </div>
  52. <div class="form-group">
  53. <input type="url" class="form-control" name="url" placeholder="Website" ng-model="user.website" required>
  54. <div class="errortext" ng-show="myForm.url.$dirty && myForm.url.$invalid">
  55. <span ng-show="myForm.url.$error.required">Website is required</span>
  56. <span ng-show="myForm.url.$error.url">Input a valid website</span>
  57. </div>
  58. </div>
  59. <div class="form-group">
  60. <input type="text" class="form-control" name="firstname" placeholder="Firstname" ng-model="user.firstname" required>
  61. <div class="errortext" ng-show="myForm.firstname.$dirty && myForm.firstname.$invalid">
  62. <span ng-show="myForm.firstname.$error.required">Firstname is required</span>
  63. </div>
  64. </div>
  65. <div class="form-group">
  66. <input type="text" class="form-control" name="lastname" placeholder="Lastname" ng-model="user.lastname" required>
  67. <div class="errortext" ng-show="myForm.lastname.$dirty && myForm.lastname.$invalid">
  68. <span ng-show="myForm.lastname.$error.required">Lastname is required</span>
  69. </div>
  70. </div>
  71. <button type="button" class="btn btn-lg btn-primary btn-block" ng-disabled="myForm.$invalid || user.repassword != user.password" ng-click="submit()"><span class="glyphicon glyphicon-check"></span> Validate</button>
  72. </form>
  73. </div>
  74. </div>
  75. <div class="alert alert-success text-center" ng-show="valid">
  76. <button type="button" class="close" ng-click="close()"><span aria-hidden="true">&times;</span></button>
  77. <span class="glyphicon glyphicon-check"></span> Form Validated
  78. </div>
  79. </div>
  80. </div>
  81. <script src="angular.js"></script>
  82. </body>
  83. </html>

angular.js

This contains our angular js scripts.

  1. var app = angular.module('app', []);
  2. app.controller('myController', function($scope){
  3. $scope.valid = false;
  4. $scope.submit = function(){
  5. $scope.valid = true;
  6. }
  7. $scope.close = function(){
  8. $scope.valid = false;
  9. }
  10. });

That ends this tutorial. Happy Coding :)


Add new comment

Filtered HTML

  • Web page addresses and e-mail addresses turn into links automatically.
  • You may insert videos with [video:URL]
  • Allowed HTML tags: <a> <em> <strong> <cite> <blockquote> <code> <ul> <ol> <li> <dl> <dt> <dd> <table> <tr> <td> <th> <img> <h1> <h2> <h3> <iframe> [video]
  • You can enable syntax highlighting of source code with the following tags: <code>, <blockcode>, <asp>, <c>, <cpp>, <csharp>, <css>, <html4strict>, <java>, <javascript>, <mysql>, <php>, <python>, <sql>, <vb>, <vbnet>. The supported tag styles are: <foo>, [foo].
  • Lines and paragraphs break automatically.

Plain text

  • No HTML tags allowed.
  • Lines and paragraphs break automatically.
CAPTCHA
This question is for testing whether or not you are a human visitor and to prevent automated spam submissions.