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

Hey! I'm Anil Singh. I author this blog. I'm Active Blogger, Programmer. I love learning new technologies, programming, blogging and participating the forum discussions more...
My Blogs - http://www.code-sample.com and http://www.code-sample.xyz
My Books - Google Amazon and Flipkart Book Store!

You Might Also Like
Post a Comment
www.code-sample.com/. Powered by Blogger.
ASK Questions
SQL Server NodeJs TypeScript JavaScript Angular SQL Server My Book