Clearing the Error Message without page Reload

Question

I am working on registration page. In that my task is to verify whether the Mobile number exists or not, before form submitting if it exits, means it should throw an error message like Mobile number exits. Its working fine but after displaying the error message, once I clear the field, the error message disappeared. But when I start typing a new mobile number It displays the error message again like "Mobile No Exits". Before checking only the message is displaying how can i avoid this. Please help me to find out the solutions. Below is my code.

Html code, here I am using ng-blur for mobile number check function.

<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-blur="mobilenoCheckFun(user.MobileNo);">
   <span ng-show="!signupForm.mobile.$error.required  && show=='true'" 
   class="help-block">{{serverMessage1}}</span>
   </div>

Controller Code

$scope.mobilenoCheckFun=function(mobileno)
{
  $http.get("/ncrMobileCheck"+mobileno).success(function(result){
    console.log(result.length)
    if(result.length !=0)
    {

      $scope.show="true";
      $scope.serverMessage1="Mobile No Exits";
    }
    else
    {
       $scope.show="false";
       $scope.serverMessage1=" ";
    }
  })
}

Edit - 1

I'm editing my question because I also need help to validate the email field in the same form.

Html Code for Email validation

<div class="form-group">
    <input type="email" ng-model="user.Email" placeholder="Email Id" name="email" required ng-change="emailIdCheck(user.Email)">
    <div ng-if="signupForm.email.$touched || signupSubmitted">
    <p ng-show="signupForm.email.$error.required" class="help-block">Email Id is Required</p>

controller code

$scope.emailIdCheck=function(emailid)
{
  $scope.serverMessage2="";
  $http.get("/ncrEmailIdCheck"+emailid).success(function(result19)
  {
    console.log(result19.length)
    if(result19.length !=0)
    {
      $scope.email="true";
      $scope.serverMessage2="Email Id Exits";
    }
    else
    {
       $scope.email="false";
      $scope.serverMessage2="";
    }
  })
}

Answer 1

Here is the live demo.

You code seems a bit messy and carry something which is not required. Check your code below which I have modified and compare it with yours. You are working in real time scenario and using http call. In my case just to full the purpose I have taken the array example. It behaves exactly like yours. Below are the changes which I have done to your code.

• ng-change instead of ng-blur.
• Created one more method checkIfNumberExists to check whether the mobile number exists in database or not (In my case It's array). FYI, this logic should exist at your server.
• No need to use any extra variable $scope.show to display the error message, otherwise what's use of form's span's ng-show messages. Notice here, I have removed required from ng-show.
• In the method mobilenoCheckFun, use blank string when you don't want to show any message instead of a single space.

That's all. You are enough smart to understand the rest of code.

HTML

<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>
</form>

AngularJS

var app = angular.module("myApp", []);
app.controller("MyCtrl", function($scope){

    $scope.checkIfNumberExists = function(list, mobileno){
    if(list.length != null && list.indexOf(mobileno) > -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
        var list = ["8123791223", "8123791225", "8123791221", "8123791203"];
      var result = $scope.checkIfNumberExists(list, mobileno);
      if(result)
        $scope.serverMessage1="Mobile Number Exits";
      else
         $scope.serverMessage1="";    
  }
});

Let us know If It was helpful.

Edit-1

As per your request in comment, I'm providing this update.

Updated Live Demo

By default keep serverMessage1 is blank and put a check on mobileno length to skip the web service call. When the mobileno length is 10 then only continue to make a web service call.

$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.checkIfNumberExists(list, mobileno);
      if(result)
        $scope.serverMessage1="Mobile Number Exits";
      else
         $scope.serverMessage1="";    
  }

Edit - 2

You have modified your question and also want to validate email field of the form. Here is the demo, which validates the email as well.

  //this method has been modified and is made common method for both the checks (mobile and email)
  $scope.checkIfExists = function(list, input){
   if(list.length != null && list.indexOf(input) > -1)
     return true;
    else 
     return false;
  }
  
  $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);//
    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 = ["mike.gimpe@gmail.com", "ben.gimpe@gmail.com", "georges.erard@hotmail.com", "viktor.damian@yahoo.com"];
        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;
    }
  }

<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>

Note - Based on your need, you can change the Regular Expression to validate the email field. Here is link which provides lots of Regular Expressions to validate the email.