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)