AgerNic.com
WEB DEVELOPER SITE, HTML, CSS, PHP, SQL
HTML Tutorial

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

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

 

jQuery code check if username is already taken

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:

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

 

PHP code check if username is already taken

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

Example
<?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.

 

Form to be added

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

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

 



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,
Check for duplicate username live or email PHP MySQL - free scripts

Online Editor
ONLINE EDITOR

news templates


COLOR PICKER

news templates
This tool makes it easy to create, adjust, and experiment with custom colors for the web.


HTML Templates
news templates
Magnews2 is a modern and creative free magazine and news website template that will help you kick off your online project in style.


CSS HTML Layout
news templates
Find here examples of creative and unique website layouts.


Free CSS HTML Menu
news templates
Find here examples of creative and unique website CSS HTML menu.


0
Online Editor
ONLINE EDITOR

news templates


COLOR PICKER

news templates
This tool makes it easy to create, adjust, and experiment with custom colors for the web.


HTML Templates
news templates
Magnews2 is a modern and creative free magazine and news website template that will help you kick off your online project in style.


CSS HTML Layout
news templates
Find here examples of creative and unique website layouts.


Free CSS HTML Menu
news templates
Find here examples of creative and unique website CSS HTML menu.


HTML Image tag, code...
How to code in HTML...
HTML text tag...
HTML text, how to display...
Container responsive styles...
HTML container tag...
HTML container...
Send forgot password by mail or message ...
PHP MySQL simple login system...
Check for duplicate username live or ema...
How to create simple search engine using...
Diseño de sitio web CSS Layout...
Diseño de caja flexible CSS3...
Botones en CSS...
ID y Clase, Diferencias entre Class e Id...
Esquina redondeada CSS...
Tamaño de caja css box-sizing: border-b...
Alineación CSS...
Altura y Anchura CSS...
Bordes CSS...