Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • How to check if mobile is already register during register via ajax

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 4.76k
    Comment on it

    Hello Reader's if you are developing a user based registration portal and you want to make unique mobile number facility then you can do this via ajax and php. In this tutorial we will see how to develop the portal which will check and verify user's mobile number during registration page. So let's gets started working on it.

    Step1: Create a simple html form which where you have to specify the mobile number text box. And it's code will go like this:- 

    <table border="1" bordercolor="#f1f7fc" width="100%">
                <thead>
                <tr>
                   <th colspan="2"><h3>Login Details</h3></th>
                </tr>
               </thead>
                <tbody><tr>
                  <td>Your email address   <span class="mandatoryStar">*</span></td>             
                  
                  <td>  <input type="text" class="form-control" id="email" maxlength="60" minlength="2" name="email" style="width:400px;"> <span id="error_email" class="error"></span></td>
                </tr>
                <tr>
                  <td>Choose a password <span class="mandatoryStar">*</span><span class="small">8 or more characters </span></td>
                  <td>
                    <input type="password" onkeyup="passwordStrength(this.value)" class="form-control" maxlength="30" minlength="8" id="password" name="password">
                  </td>
                </tr>
                <tr>
                  <td>
                   Confirm password<span class="mandatoryStar">*</span>
                  </td>
                  <td>
                   <input type="password" class="form-control" maxlength="30" minlength="8" id="confirm_password" name="confirm_password">
                  </td>
                </tr>
    </td>
                </tr>
    <tr>
                  <td> Mobile <span class="mandatoryStar">*</span>
    			   <br><span class="small">		Please enter mobile number</span>
                  </td>
                  <td>
                    <div class="input-group">
                      
                      <span class="input-group-btn">
                        <input type="text" id="mobile" name="mobile" class="form-control" minlength="9" maxlength="9" required="">
                        <span id="error_mobile" style="font-size: 12px;  display: block;" class="error"></span>               
                        <label id="errmsg">This field is required.</label>
                      </span>
    
                    </div>
                  </td>
                </tr>
                <tr>
    
                  <td>
                    Choose a user name <span class="mandatoryStar">*</span>
                    <span class="small">This is how you will be known to other traders, and cant be changed.</span>
                  </td>
                  <td>
                    <input type="text" class="form-control" id="username" name="username" maxlength="50" minlength="4" placeholder="" required="">
                    <span id="error_username" class="error"></span>                
                  </td>              
                </tr>
              </tbody></table>

     

    Step2: Now create a js validation type file and write the code as below:-

    <script>
    $(document).ready(function($) {
    	var mobileok = false; //registration part
    userRegistrationForm.submit(function() { // UserRegistration form submit
    
    
    		if(mobileok==false) { //check username exists in database validation
    			mobile.focus(); //focous on the username
    			return false;
    		}
    	});	
    
    mobile.keyup(function() { //ajax mobile number unique
    		//alert('ok');
    		var setmobile = $("#mobile").val();
    		jQuery.ajax({
    			url: webUrl+"user/CheckMobile",
    			data:{ 'mobile': setmobile },
    			type: "POST",
    			success:function(getResponse) {
    				console.log(getResponse);
    
    				if(getResponse == true) {
    
    					mobileok = false;									
    					$("#error_mobile").html(validation_mobile_exists);
    
    				} else {
    
    					mobileok = true;					
    					$("#error_mobile").html("");
    					
    				}
    				
    			}
    		});
    	});
    </script>

     

    Step 3: Create a new function in a controller for getting the ajax data via post. And it's code will go this:-

     function CheckMobile() {
                $result =  $this->usermodel->usermobile_exists($this->input->post());
                print_r($result);
        }

     

    Step 4: Now the final step is to verify this post data with the database. To check this create a new function in a model, This will fetch the details and check if this mobile exists inside the database. Its code will go like this:-

       public function usermobile_exists($mobile) {
            $this->db->where('mobile', $this->input->post('mobile'));
            $query = $this->db->get('user_registrations');
            if( $query->num_rows() > 0 ) {
              return 1;
            } else {
              return 0;
            }
          }
    

    When you run this code. When the user starts filling the mobile number the ajax will make a request to verify number. If entered mobile is found exists then it will make the validation error and put the message. 
    The output of this code is shown in the screenshot as below.

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: