AngularJS form validation - email & mobile number validation

angularjs-form-validation-email-mobile-number-validation.markdown

AngularJS form validation - email & mobile number validation

This pen helps you validate a 10-digit mobile number(which is used in India) and email address using ng-pattern directive, you can edit the pattern string in JS file for customizing number of digit of contact number.

A Pen by Bhupinder Singh on CodePen.

License.

index.html

<script src="https://code.angularjs.org/1.2.1/angular.min.js"></script>
<div class="container" ng-app="myApp">
<div class="col-md-5">
    <div class="form-area" ng-controller="formCtrl">  
        <form role="form" name="inquiryForm" novalidate>
        <br style="clear:both">
                    <h3 style="margin-bottom: 25px; text-align: center;">Contact Form</h3>

					<div class="form-group">
						<input name="email" ng-model="email" id="eml" type="text" ng-pattern="eml_add" ng-required="true" autocomplete="off" placeholder="Email" class="form-control" >
            
            <span class="red-text" ng-if="inquiryForm.email.$error.required && inquiryForm.email.$dirty">Email is a required field</span>
            
            <span class="red-text" ng-show="inquiryForm.email.$error.pattern">Invalid Email</span>
					</div>
					<div class="form-group">
						<input name="contact" ng-model="contact" id="c_num" type="text" ng-required="true" ng-pattern="ph_numbr" autocomplete="off" placeholder="Contact Number" class="form-control">
            
            <span class="red-text" ng-if="inquiryForm.contact.$error.required && inquiryForm.contact.$dirty">Contact number is a required field</span>
            <span class="red-text" ng-show="inquiryForm.contact.$error.pattern">Please enter a 10 digit number</span>
            
					</div>

            
        <button type="button" id="submit" name="submit" class="btn btn-primary pull-right" ng-disabled="inquiryForm.$invalid">Submit Form</button>
        </form>
    </div>
</div>
</div>

script.js

var app = angular.module("myApp", []);
app.controller("formCtrl", ['$scope', function($scope) {
        $scope.ph_numbr = /^\+?\d{10}$/;
        $scope.eml_add = /^[^\s@]+@[^\s@]+\.[^\s@]{2,}$/;
}]);

style.scss

.red-text{
  color:red;
}

styles

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />