python ruby-programming-language Smalltalk Vue.js Knockoutjs TypeScript JavaScript, OOPs JavaScript Angular 8,7,6,5,4 and 2 Interview Questions and Answers Angular 8,7,6,5,4 and 2 Interview Questions and Answers Angular 4 Angular 2 AngularJs 1.x NodeJs Perl Programming R Programming RequireJs Rust Programming Backbonejs closure programming language go-programming-language kotlin-programming-language
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

Hi there! Welcome to my blog. My name is Anil Singh. I'm a author of this blog. For more detail about me, kindly refer to this link..
My Blogs - http://code-sample.com and http://code-sample.xyz
My Books - Interview Questions and Answers Books- Get Your Book in 15+ Digital Stores Worldwide..

You Might Also Like
www.code-sample.com/. Powered by Blogger.
ASK Questions