AngularJS Form Validation

Submitted by nurhodelta_17 on Friday, January 12, 2018 - 19:08.

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

Add new comment

About text formats
  • 164 views