Expert Group of programming
Loading...

AngularJS Form Validation

Posted by : Heycode Tech | Posted in : Angularjs, Download | Aug 13,2016 | 0 comments

As we know that AngularJS is very popular in programming world and everyone want to use this on website. Today, we will discuss about the validation of form.

Here is the type of validation, we will follow  :
1: Required field.
2: Field at least 3 value .
3: Special field 'Password' have the min 6 and max 16 and password and confirm password must match.
4: Email validation both i.e required and email type .
5: Phone number type validation.
etc
We will write very minimum code but gain maximum output. 
We will share the default functions as well as technical knowledge of the AngularJS. 

So let’s start here.
Download Code
When you are going to use this code then you need to change the base tag as per own file structure.

<div class="row" ng-app="myApp" ng-controller="myCtrl">
    <div class="col-md-7">
      <h3>Bootstrap form with Angular Validation and Submit</h3>
     <form class="myform" name="myform" action="" method="GET" ng-submit="formsubmit_values();">
      <div class="form-group">
       <label for="fname">First Name:</label>
       <input type="text" class="form-control" id="fname" placeholder="Enter First name" name="fname" ng-model="fname" ng-minlength="2" ng-maxlength="12" required>
       <!-- Error field -->&nbsp;
       <div class="alert alert-danger fade in" ng-show="myform.fname.$touched && myform.fname.$invalid">
         <a href="#" class="close" data-dismiss="alert">&times;</a>
          <p ng-show="myform.fname.$error.required"><strong>Error!</strong> First name is required.</p>
         <p ng-show="myform.fname.$error.minlength"><strong>Error!</strong> First name has Minlength is 2.</p>
          <p ng-show="myform.fname.$error.maxlength"><strong>Error!</strong> First name has Maxlength is 12.</p>
       </div>
          <!-- Error field -->
       </div>
       <div class="form-group">
          <label for="lname">Last Name:</label>
          <input type="text" class="form-control" id="lname" placeholder="Enter Last name" name="lname" ng-model="lname" ng-minlength="2" ng-maxlength="12" required>
          <!-- Error field -->&nbsp;
       <div class="alert alert-danger fade in" ng-show="myform.lname.$touched && myform.lname.$invalid">
         <a href="#" class="close" data-dismiss="alert">&times;</a>
          <p ng-show="myform.lname.$error.required"><strong>Error!</strong> Last name is required.</p>
         <p ng-show="myform.lname.$error.minlength"><strong>Error!</strong> Last name has Minlength is 2.</p>
          <p ng-show="myform.lname.$error.maxlength"><strong>Error!</strong> Last name has Maxlength is 12.</p>
       </div>
          <!-- Error field -->
       </div>
       <div class="form-group">
          <label for="email">Email:</label>
          <input type="email" class="form-control" id="email" placeholder="Enter email" name="email" ng-model="email" required>
          <!-- Error field -->&nbsp;
       <div class="alert alert-danger fade in" ng-show="myform.email.$touched && myform.email.$invalid">
         <a href="#" class="close" data-dismiss="alert">&times;</a>
         <p ng-show="myform.email.$error.required"><strong>Error!</strong> Email is required.</p>
         <p ng-show="myform.email.$error.email"><strong>Error!</strong> Invalid Email Address.</p>
       </div>
          <!-- Error field -->
        </div>
        <div class="form-group">
          <label for="pwd">Password:</label>
          <input type="password" class="form-control" id="pwd" placeholder="Enter password" name="pwd" ng-model="pwd" ng-minlength="6" ng-maxlength="16" ng-pattern="/^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9])(?=.*?[#?!@$%^&amp;*-]).{6,16}$/" required>
          <!-- Error field -->&nbsp;
       <div class="alert alert-danger fade in" ng-show="myform.pwd.$touched && myform.pwd.$invalid">
         <a href="#" class="close" data-dismiss="alert">&times;</a>
         <p ng-show="myform.pwd.$error.required"><strong>Error!</strong> Password is required.</p>
         <p ng-show="myform.pwd.$error.pattern">Password should combined:uppercase, lowercase, number and special symbol (#?!@$%^*-): with min 6 and max 16 characters</p>
       </div>
          <!-- Error field -->
        </div>
        <div class="form-group">
          <label for="confirm_pwd">Confirm Password:</label>
          <input type="password" class="form-control" id="confirm_pwd" placeholder="Enter Confirm password" name="confirm_pwd" ng-model="confirm_pwd" ng-minlength="6" ng-maxlength="16" ng-pattern="pwd" required>
       <!-- Error field -->&nbsp;
       <div class="alert alert-danger fade in" ng-show="myform.confirm_pwd.$touched && myform.confirm_pwd.$invalid">
         <a href="#" class="close" data-dismiss="alert">&times;</a>
          <p ng-show="myform.confirm_pwd.$error.required"><strong>Error!</strong> Confirm password is required.</p>
          <p ng-show="myform.confirm_pwd.$error.pattern"><strong>Error!</strong> Password and Confirm password should same.</p>
        </div>
          <!-- Error field -->
       </div>
       <div class="form-group">
          <label for="phone">Phone:</label>
          <input type="text" class="form-control" id="phone" placeholder="Enter Phone number" name="phone" ng-model="phone" ng-pattern="/^\+?\d{2}[- ]?\d{3}[- ]?\d{5}$/" required>
          <p>Like - +xx-xxx-xxxxx, xx-xxx-xxxxx,xxxxxxxxxx</p>
          <!-- Error field -->&nbsp;
       <div class="alert alert-danger fade in" ng-show="myform.phone.$touched && myform.phone.$invalid">
         <a href="#" class="close" data-dismiss="alert">&times;</a>
          <p ng-show="myform.phone.$error.required"><strong>Error!</strong> Phone number is required.</p>
          <p ng-show="myform.phone.$error.pattern"><strong>Error!</strong> Phone number is invalid.</p>
        </div>
          <!-- Error field -->
       </div>       
        <button type="submit" ng-disabled="myform.$invalid" class="btn btn-default">Submit</button>
      </form>
    </div>
     <div class="col-md-5">
      &nbsp;
    </div>
  </div>

<script>
/*
 *@author ;: Heycodetech
 * AngularJS form : Angular code for form validation and submit
 */
 var app = angular.module("myApp",[], function($locationProvider) {
                     $locationProvider.html5Mode(true);
});
 app.controller("myCtrl",function($scope,$location){
  $scope.demo="demo value";
  $scope.form_values = "";
//  $scope.form_values = $location.search();
  $scope.formsubmit_values = function(){
  	$scope.form_values = $location.search();
  }
 });
</script>






So let’s start the work from one by one what I have done.

I want to just inform to all that no single line of JS code have written in validation.
Only use the AngularJS feature. 

Explanation one by one

A :Required field and at least Two character validation

As we know in code, I have used the HTML

<div class="form-group">
       <label for="fname">First Name:</label>
       <input type="text" class="form-control" id="fname" placeholder="Enter First name" name="fname" ng-model="fname" ng-minlength="2" ng-maxlength="12" required>
       <!-- Error field -->&nbsp;
       <div class="alert alert-danger fade in" ng-show="myform.fname.$touched && myform.fname.$invalid">
         <a href="#" class="close" data-dismiss="alert">&times;</a>
          <p ng-show="myform.fname.$error.required"><strong>Error!</strong> First name is required.</p>
         <p ng-show="myform.fname.$error.minlength"><strong>Error!</strong> First name has Minlength is 2.</p>
          <p ng-show="myform.fname.$error.maxlength"><strong>Error!</strong> First name has Maxlength is 12.</p>
       </div>
          <!-- Error field -->
       </div>

In the code, I have used only attributes like.

  • ng-minlength=”2″:it defines the min length.
  • ng-maxlength=”12″: it defines the max length.
  • required : it is make the field required.
  • name=”fname” ng-model=”fname” : These are used to identified the field name.
  • By using of this($error and attributes),I have used to show the error message. See in above code.

Note:I will also describe about the : $touched,$invalid etc : on below in detailed.

B: Email validation :Required and Email type
As we know that for this type of validation,mostly developers are used the : Regex : I ‘m sure that is also good but here I have used the :Angular feature.
See in Code :

<div class="form-group">
          <label for="email">Email:</label>
          <input type="email" class="form-control" id="email" placeholder="Enter email" name="email" ng-model="email" required>
          <!-- Error field -->&nbsp;
       <div class="alert alert-danger fade in" ng-show="myform.email.$touched && myform.email.$invalid">
         <a href="#" class="close" data-dismiss="alert">&times;</a>
         <p ng-show="myform.email.$error.required"><strong>Error!</strong> Email is required.</p>
         <p ng-show="myform.email.$error.email"><strong>Error!</strong> Invalid Email Address.</p>
       </div>
          <!-- Error field -->
        </div>

In the code, I have AngularJS feature.

  • I have already discussed about this attribute – name=”email” ng-model=”email” required – in above.
  • The code : myform.email.$error.email : after the $error, you are seeing the object- :email :it is used to validate the email type validation.

C: Password and confirm password validation
Well,I ‘m waiting this type of the validation and I also informed you that I have written the : smart code : for handle this type of validation. No single line of JS CODE written .

See in Code :

Password Field:
 <div class="form-group">
          <label for="pwd">Password:</label>
          <input type="password" class="form-control" id="pwd" placeholder="Enter password" name="pwd" ng-model="pwd" ng-minlength="6" ng-maxlength="16" ng-pattern="/^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9])(?=.*?[#?!@$%^&amp;*-]).{6,16}$/" required>
          <!-- Error field -->&nbsp;
       <div class="alert alert-danger fade in" ng-show="myform.pwd.$touched && myform.pwd.$invalid">
         <a href="#" class="close" data-dismiss="alert">&times;</a>
         <p ng-show="myform.pwd.$error.required"><strong>Error!</strong> Password is required.</p>
         <p ng-show="myform.pwd.$error.pattern">Password should combined:uppercase, lowercase, number and special symbol (#?!@$%^*-): with min 6 and max 16 characters</p>
       </div>
</div>

In this code,I have used the :Regex : for validating the field.

  • I need the :uppercase, lowercase, number and special symbol (#?!@$%^*-): so I have written this Regex pattern but if you need some other type of validation then you need to change the only :Regex pattern:.
  • For validating any Regex pattern : you need to call :$error.pattern : with proper syntex (see above).
Confirm Password field:
<div class="form-group">
          <label for="confirm_pwd">Confirm Password:</label>
          <input type="password" class="form-control" id="confirm_pwd" placeholder="Enter Confirm password" name="confirm_pwd" ng-model="confirm_pwd" ng-minlength="6" ng-maxlength="16" ng-pattern="pwd" required>
       <!-- Error field -->&nbsp;
       <div class="alert alert-danger fade in" ng-show="myform.confirm_pwd.$touched && myform.confirm_pwd.$invalid">
         <a href="#" class="close" data-dismiss="alert">&times;</a>
          <p ng-show="myform.confirm_pwd.$error.required"><strong>Error!</strong> Confirm password is required.</p>
          <p ng-show="myform.confirm_pwd.$error.pattern"><strong>Error!</strong> Password and Confirm password should same.</p>
        </div>
          <!-- Error field -->
       </div>

Why I ‘m asking it is a smart code the reason is this (Confirm password) validation also uses the pattern but it is different type of pattern and it will compare the only password field.
See in below .

  • In the ng-pattern : ng-pattern=”pwd” : I have written the name of password and when I call it :$error.pattern : then it will match the exact value of password.
  • I hope our aim will finish to verify the password and confirm password validation.

Explanation : Form State and Input State

As per AngularJS is rapidly grow,it’s form state and Input state also modified.Below is the detailed about it.

Form State :AngularJS
#Form StateTypeDescription
1$pristineBoolean: Default TrueInitial State: if the form/input has not been used yet.
2$submittedBoolean: Default TrueForm is submitted
3$dirtyBoolean: Default TrueIf form or input have been used.
4$validBoolean: Default TrueBased on your attribute rule it describe valid state like required attribute if form filled then it gives true.
5$invalidBoolean: Default TrueBased on your attribute rule it describe invalid state like required attribute if form not filled then it gives true.

Let’s see the input state

Input State :AngularJS
#Input StateTypeDescription
1$untouchedBoolean: Default TrueThis event occurs before touching the field.
2$touchedBoolean: Default TrueThis event occurs after touching the field.
3$dirtyBoolean: Default TrueIf form or input have been used.
4$validBoolean: Default TrueBased on your attribute rule it describe valid state like required attribute if form filled then it gives true.
5$invalidBoolean: Default TrueBased on your attribute rule it describe invalid state like required attribute if form not filled then it gives true.

Disabling the Submit Button ng-disabled

I have used this feature in above code, it is used to disabled the submit button until all field are not valid.
See in code

<button type="submit" ng-disabled="myform.$invalid" class="btn btn-default">Submit</button>

With just that small code : ng-disabled :, our form button will be disabled if the form is $invalid.
This means that our form input field is required and it is invalid.

I hope you have enjoyed this article and it is very helpful. Please reply to ask/informed/advice me via comment.

Tags:

Author information - Heycode Tech

Every world can ask question and my website registered user give the suggestion.

See all posts by Author

Connect to author

About us

Heycodetech is a platform where you can ask any questions related to the programming like PHP,jQuery, MYSQL,HTML , CSS and moreHere is the Expert group of programming.