AngularJS Example:
HTML
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<form ng-app="myApp" name="signupForm" ng-controller="MyCtrl">
<div class="form-group col-xs-6">
<input type="text" ng-model="user.MobileNo" placeholder="Mobile Number"
name="mobile" required ng-maxlength="10" maxlength="11" id="default1"
ng-change="mobilenoCheckFun(user.MobileNo);">
<span ng-show="signupForm.mobile.$error">{{serverMessage1}}</span>
</div>
<br>
<div class="form-group col-xs-4">
<input type="text" ng-model="user.Email" placeholder="Email Id" name="email" required ng-change="emailIdCheck(user.Email);">
<span>{{invalidEmailMsg}}</span>
<span ng-show="signupForm.email.$error">{{serverMessage2}}</span>
<span ng-show="signupForm.email.$error.required" class="help-block">Email Id is Required</span>
</div>
</form>
JavaScript
var app = angular.module("myApp", []);
app.controller("MyCtrl", function($scope){
$scope.checkIfExists = function(list, input){
if(list.length != null && list.indexOf(input) > -1)
return true;
else
return false;
}
$scope.mobilenoCheckFun=function(mobileno)
{
//define an array to check If 'mobileno' exists, in your case this check happens at server side. but the logic is same. This list is fetched from DB in your case
$scope.serverMessage1="";
if(mobileno.length != 10) return;
var list = ["8123791223", "8123791225", "8123791221", "8123791203"];
var result = $scope.checkIfExists(list, mobileno);
if(result)
$scope.serverMessage1="Mobile Number Exits";
else
$scope.serverMessage1="";
}
$scope.validateEmail = function(email)
{
var regEx = /\S+@\S+\.\S+/;
return regEx.test(email);
}
$scope.emailIdCheck=function(emailid)
{
$scope.invalidEmailMsg = "";
$scope.serverMessage2 = "";
if(emailid.length == 0) return;
//first check whether email id is valid or not
var isEmailValid = $scope.validateEmail(emailid);//alert(isEmailValid);
if(isEmailValid){
//if valid then make a service call to check whether it exists in database or not, in my case i'm checking it in array
var emailList = ["[email protected]", "[email protected]", "[email protected]", "[email protected]"];
var result = $scope.checkIfExists(emailList, emailid);
if(result)
$scope.serverMessage2="Email Id Exits";
else
$scope.serverMessage2="";
}else{
//if it's not valid, do nothing, just show a message
$scope.invalidEmailMsg = "Invalid Email Id";
return;
}
}
});