Check for duplicate username live or email PHP MySQL

Free Scripts » Check for duplicate username live

When we want to make a user or element registration form that we want its name to be unique and that it cannot be duplicated in the database, we can use a validation in our text fields of the form to check the availability or existence of the name live.

UserName

UserName - UserName already taken

UserName - UserName available

This can also be applied for the validation of unique emails. You could also check at the moment if an email already exists in the database or any data that occurs to you.

In the example illustrated associated with this entry, we are going to see a form where the user can enter their name or nickname to register or log in to a Web page. We will check the availability of the username live using Ajax technology to send the request to the server without having to reload the page.

We will achieve this using the following technologies: HTML, jQuery, AJAX, PHP and MySQLi.

In the header of the page or inside the tag we will add the jQuery library and the script that allows live validation of our "username" field:

<script src="https://code.jquery.com/jquery-3.2.1.js"></script>

<script type="text/javascript">

$(document).ready(function() { 

$('#username').on('blur', function() {

$('#result-username').html('<img src="images/loader.gif" />').fadeOut(1000);



var username = $(this).val(); 

var dataString = 'username='+username;



$.ajax({

type: "POST",

url: "check_username_availablity.php",

data: dataString,

success: function(data) {

$('#result-username').fadeIn(1000).html(data);

}

});

}); 

}); 

</script>
  

This code can also be added to the bottom of the page just before the closing </body> tag.

In this case, we are waiting for the completion of writing a username in our text field with the identifier "username" and since we are using the "blur" event, the moment we change the field will be when the validation of the field content. You can use "keyup" to perform validation for each key that the user presses.

When this event is executed, we display an image to indicate to the user that it is loading or searching for something for 1 second. The typical loading image. Then we make an Ajax call sending the value of our "username" text field to execute the file "check_username_availablity.php" which is in charge of checking if the username entered exists in the database.

TAGS: Check for duplicate username Live or email PHP MySQL, Check Live Username Availability

how to check if username already exists in php mysqli, email already exist validation in php, check if email address already exists in the database using jquery and php, how to check if value already exists in mysqli database in php, check if username is already taken with php and mysql, check username and password from database in php, check if user already exists without submitting form in php, how to check if username already exists in php pdo,

The PHP file running on the server in the Ajax call contains the following:

<?php 

require('config.php');

sleep(1);

if (isset($_POST)) {

$username = (string)$_POST['username'];



$result = $connexion->query(

'SELECT * FROM users WHERE username = "'.strtolower($username).'"'

);



if ($result->num_rows > 0) {

echo '<div class="alert alert-danger"><strong>Oh no!</strong> Nombre de usuario no disponible.</div>';

} else {

echo '<div class="alert alert-success"><strong>Enhorabuena!</strong> Usuario disponible.</div>';

}

}

?>
  

In this file we are including the file "config.php" that is responsible for establishing the connection with the database using MySQLi.

If you don't know how to connect to the database using MySQLi you can take a look at the following tutorial -> Interact with a database using Mysqli.

Once it connects with the database, we stop the execution for a second using the sleep () function to maintain the loading effect and if we have received data, we make the query that returns all the user's data if it exists.

This file returns a string with the error or confirmation message that is processed in the success of the Ajax that we have commented before.

The form to be added within the <body> of the page can be something like the following:

<form action = "#" method = "post">

<div class = "form-group">

<label for = "username"> User </label>

<input type = "text" class = "form-control" id = "username" name = "username" placeholder = "Enter your name ...">

<small class = "form-text text-muted"> Choose "jose" or "maria" being users that already exist in the database. </small> <br/>

<div id = "result-username"> </div>

</div>

<div class = "form-group">

<label for = "password"> Password </label>

<input type = "password" class = "form-control" id = "password" name = "password" placeholder = "Write your password here ...">

</div>

</form>