angularjs form validation

angularjs form validation

I am going to share the interesting topic to validate input form, This input form contains to
  1. Required input text field.
  2. input phone number.
  3. input web URL address.
  4. Email validation etc.

All the above are used to ng-pattern attribute to validate to each field. The Example code as given below


<!doctype html>
<html>
<head>
    <title>angularjs form validation</title>
    <script src="http://code.angularjs.org/1.2.9/angular.min.js"></script>
    <style>
        .error {
            color: red;
        }
    </style>
    <script>
        var app = angular.module('myApp', []);

        app.controller('mainCtrl', function ($scope) {
            $scope.username = '';
            $scope.word = /^\s*\w*\s*$/;
            $scope.webURL = '';
            $scope.phoneNumbr = /^\+?\d{2}[- ]?\d{3}[- ]?\d{5}$/;
        });
  </script>
</head>

<body ng-app="myApp">
    <ng-form name="myForm" ng-controller="mainCtrl">
    <div>UserName :</div>
    <div>
      <input type="text" name="username" ng-model="username" ng-pattern="word" required>
      <span class="error" ng-show="myForm.username.$error.required">Required!</span>
    </div>

    <div>URL :</div>
    <div>
      <input type="url" name="webURL" ng-model="webURL" required>
      <span class="error" ng-show="myForm.webURL.$error.required">Required!</span>
      <span class="error" ng-show="myForm.webURL.$error.url">Not valid url!</span>
    </div>

    <div>EmailId :</div>
    <div>
      <input type="email" placeholder="Email" name="email" ng-model="m_email" ng-minlength=3 ng-maxlength=20 required />
      <span class="error" ng-show="myForm.email.$error.required">Required!</span>
      <span class="error" ng-show="myForm.email.$error.minlength">Not less that 3 char</span>
      <span class="error" ng-show="myForm.email.$error.email">Invalid Email!</span>
    </div>

    <div>Phone No. :</div>
    <div>
      <input type="text" placeholder="+91-036-78658" name="phone" ng-pattern="phoneNumbr" ng-model="phone" />
      <span class="error" ng-show="myForm.phone.$error.required">Required!</span>
      <span class="error" ng-show="myForm.phone.$error.minlength">Phone no not less that 10 char.</span>
      <span class="error" ng-show="myForm.phone.$error.maxlength">Phone no not more than 11 char.</span>
      <span class="error" ng-show="myForm.phone.$error.pattern">Please match pattern [+91-036-78658 or 91-036-78658 ]</span>
    </div>
    <div>
      <input type="button" value="Submit">
    </div>
  </ng-form>
</body>
</html>

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.