Email and Phone Number Validation in Angular JS

10 Feb 2019

In this tutorial, We are going to see an example of Email and Phone Number Validation in Angular Js

Email and Phone Number Validation in Angular JS:

<html>
<head>
<title>
Validation using Angular JS
</title>
<script src="https://code.angularjs.org/1.2.1/angular.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>

<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="txtEmail" type="text" ng-pattern="Email" 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="txtPhoneNumber" type="text" ng-required="true" ng-pattern="PhoneNumber" 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 type="text/javascript">
var app = angular.module("myApp", []);
app.controller("formCtrl", ['$scope', function($scope) {
$scope.PhoneNumber = /^\+?\d{10}$/;
$scope.Email = /^[^\s@]+@[^\s@]+\.[^\s@]{2,}$/;
}]);
</script>
</body>
</html>

View Demo

View More:

angular.isNumber function in Angular JS.
Angular JS ng-cloak directive.
ng-idle module in Angular Js
Services in Angular JS.

Conclusion:

I hope this is a useful post for you. Please don’t hesitate to comment for technical help. Your feedback and suggestions are important for me.

Thank You.

Related Posts:

Leave a Comment Cancel reply