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.
| Fields | Type |
|---|---|
| id | INT(11) |
| membername | VARCHAR(255) |
| VARCHAR(255) | |
| memberPass | VARCHAR(255) |
Check if user already exists without submitting form
Step 1: signup.php
signup
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('');
}
});
}
});
});
Don’t Miss : How To Check Email Already Exist In Database In Php
Step 4: process.php
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:
Include jQuery and create a function to send an AJAX request when the username input changes:
Create a PHP script (check_username.php) that checks the database for the username and returns a response indicating whether the username is available:
0) {
echo "Username not available";
} else {
echo "Username available";
}
// 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.
I would like to have feedback on my infinityknow.com blog.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.