username already exists validation in 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.

members table
Fields Type
id INT(11)
membername VARCHAR(255)
email VARCHAR(255)
memberPass VARCHAR(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('');
      	}
      });
 	}
 });
});

Free Live Chat for Any Issue

Don’t Miss : How To Check Email Already Exist In Database In Php

Also Read This πŸ‘‰   PHP Handle Multiple Checkbox Array

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();
  	}
  }

?>

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.