Morioh
Login
Iliana Welch

Iliana Welch

1 year ago

Username Already Exists Validation with jQuery

username already exists validation in jquery – jQuery Validate remote method usage to check if username already exists. Generally we need to check if a username or email already exists or not. I want to validate if username exists in database using jQuery.

username already exists validation in jquery

jQuery Validate remote method usage to check if username already exists. Check $_POST[‘membername’] value in members table. If username exists then return Available.

FieldsType
idINT(11)
membernameVARCHAR(255)
emailVARCHAR(255)
memberPassVARCHAR(255)

Check if user already exists without submitting form

Step 1: signup.php
 

<?php include('process.php'); ?>
<html>
<head>
<title>signup</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<form id="signup_form">
<h1>signup</h1>
<div id="error_msg"></div>
<div>
<input type="text" name="membername" placeholder="membername" id="membername" >
<span></span>
</div>
<div>
<input type="email" name="email" placeholder="Member Email" id="email">
<span></span>
</div>
<div>
<input type="password" name="memberPass" placeholder="memberPass" id="memberPass">
</div>
<div>
<button type="button" name="signup" id="reg_btn">signup</button>
</div>
</form>
</body>
</html>
<!-- scripts -->
<script src="jquery-3.2.1.min.js"></script>
<script src="script.js"></script>

 

Step 2: styles.css

 

body {
background: #A9D9C3;
}
#signup_form h1 {
text-align: center;
}
#signup_form {
width: 37%;
margin: 100px auto;
padding-bottom: 30px;
border: 1px solid #918274;
border-radius: 5px;
background: white;
}
#signup_form input {
width: 80%;
height: 35px;
margin: 5px 10%;
font-size: 1.1em;
padding: 4px;
font-size: .9em;
}
#reg_btn {
height: 35px;
width: 80%;
margin: 5px 10%;
color: white;
background: #3B5998;
border: none;
border-radius: 5px;
}
/*Styling for errors on form*/
.form_error span {
width: 80%;
height: 35px;
margin: 3px 10%;
font-size: 1.1em;
color: #D83D5A;
}
.form_error input {
border: 1px solid #D83D5A;
}

/*Styling in case no errors on form*/
.form_success span {
width: 80%;
height: 35px;
margin: 3px 10%;
font-size: 1.1em;
color: green;
}
.form_success input {
border: 1px solid green;
}
#error_msg {
color: red;
text-align: center;
margin: 10px auto;
}

 

Step 3:script.js

 

$('document').ready(function(){
var membername_state = false;
var email_state = false;
$('#membername').on('blur', function(){
var membername = $('#membername').val();
if (membername == '') {
membername_state = false;
return;
}
$.ajax({
url: 'signup.php',
type: 'post',
data: {
'membername_check' : 1,
'membername' : membername,
},
success: function(response){
if (response == 'taken' ) {
membername_state = false;
$('#membername').parent().removeClass();
$('#membername').parent().addClass("form_error");
$('#membername').siblings("span").text('Sorry... membername already taken');
}else if (response == 'not_taken') {
membername_state = true;
$('#membername').parent().removeClass();
$('#membername').parent().addClass("form_success");
$('#membername').siblings("span").text('membername available');
}
}
});
});
$('#email').on('blur', function(){
var email = $('#email').val();
if (email == '') {
email_state = false;
return;
}
$.ajax({
url: 'signup.php',
type: 'post',
data: {
'email_check' : 1,
'email' : email,
},
success: function(response){
if (response == 'taken' ) {
email_state = false;
$('#email').parent().removeClass();
$('#email').parent().addClass("form_error");
$('#email').siblings("span").text('Sorry... Email already taken');
}else if (response == 'not_taken') {
email_state = true;
$('#email').parent().removeClass();
$('#email').parent().addClass("form_success");
$('#email').siblings("span").text('Email available');
}
}
});
});

$('#reg_btn').on('click', function(){
var membername = $('#membername').val();
var email = $('#email').val();
var memberPass = $('#memberPass').val();
if (membername_state == false || email_state == false) {
$('#error_msg').text('Fix the errors in the form first');
}else{
// proceed with form submission
$.ajax({
url: 'signup.php',
type: 'post',
data: {
'save' : 1,
'email' : email,
'membername' : membername,
'memberPass' : memberPass,
},
success: function(response){
alert('member saved');
$('#membername').val('');
$('#email').val('');
$('#memberPass').val('');
}
});
}
});
});

 

 

Step 4: process.php

 

<?php
$db = mysqli_connect('localhost', 'root', '', 'pakainfo_v1');
if (isset($_POST['membername_check'])) {
$membername = $_POST['membername'];
$query = "SELECT * FROM members WHERE membername='$membername'";
$output = mysqli_query($db, $query);
if (mysqli_num_rows($output) > 0) {
echo "pakainfo_v1";
}else{
echo 'not_taken';
}
exit();
}
if (isset($_POST['email_check'])) {
$email = $_POST['email'];
$query = "SELECT * FROM members WHERE email='$email'";
$output = mysqli_query($db, $query);
if (mysqli_num_rows($output) > 0) {
echo "pakainfo_v1";
}else{
echo 'not_taken';
}
exit();
}
if (isset($_POST['save'])) {
$membername = $_POST['membername'];
$email = $_POST['email'];
$memberPass = $_POST['memberPass'];
$query = "SELECT * FROM members WHERE membername='$membername'";
$output = mysqli_query($db, $query);
if (mysqli_num_rows($output) > 0) {
echo "exists";
exit();
}else{
$query = "INSERT INTO members (membername, email, memberPass)
VALUES ('$membername', '$email', '".md5($memberPass)."')";
$output = mysqli_query($db, $query);
echo 'Saved!';
exit();
}
}

?>

 

Example 2: Check username availability using PHP and jQuery

To check the availability of a username using PHP and jQuery, you can use AJAX to send a request to a PHP script that checks the database for the username. Here’s an example:

Create a form that includes an input field for the username and a div to display the availability message:
 

<form>
<label for="username">Username:</label>
<input type="text" name="username" id="username">
<div id="availability"></div>
</form>


Include jQuery and create a function to send an AJAX request when the username input changes:
 

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
$('#username').on('input', function() {
var username = $(this).val();
$.ajax({
url: 'check_username.php',
type: 'POST',
data: {username: username},
success: function(response) {
$('#availability').html(response);
}
});
});
});
</script>


Create a PHP script (check_username.php) that checks the database for the username and returns a response indicating whether the username is available:
 

<?php
// Connect to database
$servername = "localhost";
$username = "username";
$password = "password";
$dbname = "database";
$conn = mysqli_connect($servername, $username, $password, $dbname);

// Check if username exists
$username = $_POST['username'];
$sql = "SELECT * FROM users WHERE username='$username'";
$result = mysqli_query($conn, $sql);
if (mysqli_num_rows($result) > 0) {
echo "<span style='color:red;'>Username not available</span>";
} else {
echo "<span style='color:green;'>Username available</span>";
}

// Close database connection
mysqli_close($conn);
?>

 

In this example, we’re using mysqli to connect to the database and query the users table for the username. If the username is found, we’re returning a message indicating that the username is not available. If the username is not found, we’re returning a message indicating that the username is available. Note that this is a simple example and you should implement proper security measures (such as sanitizing user input and using prepared statements) to protect against SQL injection attacks.

 

I hope you get an idea about username already exists validation in jquery.

 

#javascript 

Username Already Exists Validation with jQuery
1.50 GEEK