how can I check username exists in db via a jquery keyup - php

Question

Hi I'm creating a form that contains username password etc.. and I used jquery to validate the form and I want to check that the username is already present in the mysql database. if it is present then the form should not be submitted.
Here is my code so far:
<form id="register" name="register" action="somewhere.php" method="post" >
<label for ="Username"> Username </label><br>
<input type="text" class="register-control" id="Username" name="Username" autocomplete="off" placeholder="Enter Username"> <br>
<div class="username_avail_result" id="username_avail_result"></div><br>
<label for ="Password"> Password </label><br>
<input type="password" class="register-control" id="password" name="password" placeholder="Enter Password" ><br><br>
<label for ="Confirm-Password"> Confirm Password </label><br>
<input type="password" class="register-control" id="Confirm_Password" name="Confirm_Password" placeholder="Confirm Password" ><br>
<label for="email" > Email </label><br>
<input type ="email" class="register-control" id="email" name="email" placeholder="Enter Valid Email"><br><br>
<button type="submit" >Submit</button>
</form>
And the jquery is:
<script type="text/javascript" src="jquery-1.9.1.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.8/jquery.validate.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#Username').keyup(function(){ // Keyup function for check the user action in input
var Username = $(this).val(); // Get the username textbox using $(this) or you can use directly $('#username')
var UsernameAvailResult = $('#username_avail_result'); // Get the ID of the result where we gonna display the results
if(Username.length > 2) { // check if greater than 2 (minimum 3)
UsernameAvailResult.html('Loading..'); // Preloader, use can use loading animation here
var UrlToPass = 'action=username_availability&username='+Username;
$.ajax({ // Send the username val to another checker.php using Ajax in POST menthod
type : 'POST',
data : UrlToPass,
url : 'checker.php',
success: function(responseText){ // Get the result and asign to each cases
if(responseText == 0){
UsernameAvailResult.html('<span class="success">Number available</span>');
}
else if(responseText > 0){
UsernameAvailResult.html('<span class="error">Number already taken</span>');
}
else{
alert('Problem with sql query');
}
}
});
}
});
$("#register").validate({
errorElement: 'div',
rules:{
"Username":{
required: true,
minlength:5
},
"password":{
required:true,
minlength:5
},
"Confirm_Password":{
required:true,
equalTo: "#password"
},
"email":{
required:true,
}
},
messages: {
Username:{
required: "Please provide a username",
minlength: "Your Username must be at least 5 characters long"
},
password: {
required: "Please provide a password",
minlength: "Your password must be at least 5 characters long"
},
Confirm_Password: {
required: "Please provide a confirm password",
equalTo: "Please enter the same password as above"
}
},
email:{
required: "Please provide a valid email",
}
});
});
</script>
Both work super, my doubt is how can I merge both, and also if the username is already taken the form should not submitted.

Answer 1

run a query in your php file to get all users with the current email i.e."example#example.com" and username i.e. "example" if you get any rows then it exists therefore don't add it, otherwise, add it!
$_GET['email'] = $email;
$result = mysql_query("SELECT * FROM users WHERE email='$email'");
if($result === FALSE) {
die(mysql_error()); // TODO: better error handling
}
if(mysql_num_rows($result) >= 1) {
//show already registered
//you can either return false or change the return string/array to "registered"
} else {
mysql_query('INSERT INTO users ..............);
}

Answer 2

You could clear the username if its taken, thus causing the validation to fail
success: function(responseText){ // Get the result and asign to each cases
if(responseText == 0){
UsernameAvailResult.html('<span class="success">Number available</span>');
}
else if(responseText > 0){
UsernameAvailResult.html('<span class="error">Number already taken</span>');
//clear username
$('#Username').val('');
}
else{
alert('Problem with sql query');
//clear username
$('#Username').val('');
}
}
});

Answer 3

You can check the username on Keyup and form submit and prevent the form submit when username exists.
$("#register").submit(function( event ) {
if(usernameExists($('#Username').val()))
event.preventDefault();
});
$('#Username').keyup(function(){
usernameExists($(this).val();
});
usernameExists() should have all your current validation and ajax code as in your $('#Username').keyup(function(){ });