Form email validation in angularjs

email, number ng-pattern validation in angularjs

Hello everyone, Today's going to share the code sample of email/form validation using angularjs. This is the very simple and useful to validate an email input text box after clicking on validate button.

If you need to validate an email then first use input type="email" and of type="text" etc.


In angularjs, different types of validation like.

  1. Required field
  2. Minimum length
  3. Maximum length
  4. ng-pattern etc.

I am going to explain two example one is very basic using required and other example is used email regular expression. Both example as given below.

Example1 : Required field validation


<!doctype html>
<html ng-app>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js" data-semver="1.0.8"></script>
  <script>
    function MainCtrl($scope) {
      $scope.emailId = '';
    }
  </script>
</head>

<body>
  <form name="myForm" ng-controller="MainCtrl">
    Email *:
    <input type="email" name="inputtext" ng-model="emailId" required>
    <span class="error" ng-show="myForm.inputtext.$error.required">Required!</span>
    <span class="error" ng-show="myForm.inputtext.$error.email">Not valid email!</span>
    <lable>{{text}}</lable>
  </form>
</body>



</html>

The out put look like below image


Example2 : Number validation using ng-pattern with regular expression



<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>ng pattern validation in angularjs</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.js"></script>
</head>
<body>
    <form name="myform">
        <input type="number" require ng-pattern="/^\d{0,9}(\.\d{1,9})?$/">
        <input type="submit">
    </form>
</body>
</html>

The output as given below image.


Example3 : Email regular expression using broadcast


email regular expression: [/^[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,4}$/]


The code sample of email validation in angularjs as give below.



<!doctype html>
<html ng-app="formValidation">
<head>
    <meta charset="utf-8">
    <title>form validation in angularjs</title>
    <style>
        .error {
            color: #B94A48;
        }
    </style>
<script>
    var app = angular.module('formValidation', []);

    app.controller('mainCtrl', function($scope) {
      $scope.emp = {
        email: '' "
      };

      $scope.validate = function() {
        $scope.$broadcast('Validations');
      };
    });

    app.directive('checkEmailType', function() {

      //email regular expression.
      var emailRegul = /^[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,4}$/;

      return {
        require: 'ngModel',
        link: function(scope, elm, attr, ctrl) {
          function doValidate() {
            if (emailRegul.test(elm.val())) {
              ctrl.$setValidity('EmailId', true);
            } else {
              ctrl.$setValidity('EmailId', false);
            }
          };
          
          scope.$on('Validations', doValidate);
        }
      };
    });
</script>
</head>
<body ng-controller="mainCtrl">
    <ng-form name="myForm">
        <label>Email Id*</label>
        <input check-email-type type="text" name="Email" ng-model="emp.email">
        <span ng-show="myForm.Email.$error.EmailId" ng-class="{error: myForm.Email.$invalid}">Please enter valid email.</span>
        <button ng-click="validate()">Validate Submit Form</button>
    </ng-form>
</body>
</html>


The out put look like below image.




ANIL SINGH

Anil Singh is an author, tech blogger, and software programmer. Book writing, tech blogging is something do extra and Anil love doing it. For more detail, kindly refer to this link..
My Blogs - https://code-sample.com and https://code-sample.xyz
My Book1 - BEST SELLING ANGULAR BOOK (INCLUDING ALL VERSIONS 2, 4, 5, 6, 7)
My Book2 - ANGULAR 2 INTERVIEW QUESTIONS BOOK - Both Books are Available on WorldWide.

www.code-sample.com/. Powered by Blogger.