Check existing email address and display password strength using jQuery Ajax PHP

With the following code snippet, you can check the already used email address in the database. Code snippet help in the user registration section to avoid duplicate email address entry and avoid SQL query error as well.
The code snippet includes an additional feature for register form validation. The validation code checks the password strength while typing the password.
The code snippet is very easy to use. In case the existing email validation is not required. Then replace the email input field attribute “data-checkexist=true” with “data-checkexist=false” or remove the attribute.

To skip the strong password validation. Replace the password input field attribute “data-strongpwd=true” with “data-strongpwd=false” or completely remove the attribute.

The code snippet has three parts.

1. Form HTML code

<div class="container">
			<div class="row align-items-center">
				<div class="col">
					<h1 class="mb-3 text-center">Check exist email and strong password</h1>
					<div id="logs" class="alert alert-danger" style="display:none;"></div>
					<form method="post" action="" id="frmTest">
						<div class="form-row">
							<div class="form-group col-md-6">
								<label for="email" class="control-label">Email</label>
								<input type="email" class="form-control" id="email" name="email" data-checkexist="false" autocomplete="off">
							</div>
							<div class="form-group col-md-6">
								<label for="password" class="control-label">Password </label>
								<input type="password" class="form-control" id="password" name="password" data-strongpwd="false" autocomplete="off">
								<div id="pwdStrength"></div>
							</div>
						</div>
						
						<div class="form-group row">
							<div class="col-sm-offset-4 col-sm-8">
								<button type="submit" class="btn btn-primary">Submit</button>
							</div>
						</div>
					</form>
				</div>
			</div>
		</div>

2. jQuery validation code

(function ($) {
		'use strict';
		
		/*
		## check password strength on typing.
		*/
		$(document).on('keyup', '#password', function(){
			var pwdValue = $(this).val();
			var strongPattern = /^(?=.*[!@#$%^&*-])(?=.*[0-9])(?=.*[a-z])(?=.*[A-Z]).{8,}$/;
			var moderatePattern = /^(?=.*[0-9])(?=.*[a-z])(?=.*[A-Z]).{6,}$/;
			var moderatePattern_2 = /^(?=.*[!@#$%^&*-])(?=.*[0-9])(?=.*[a-z]).{6,}$/;
			
			if(strongPattern.test(pwdValue)){
				$("#pwdStrength").html('<span class="badge badge-success">Strong</span>');
			} else if(moderatePattern.test(pwdValue) || moderatePattern_2.test(pwdValue)){
				$("#pwdStrength").html('<span class="badge badge-warning">Moderate</span>');
			} else {
				$("#pwdStrength").html('<span class="badge badge-danger">Week</span>');
			}
			
		});
		
		/*
		## on form submit event call.
		*/
		$(document).on('submit', '#frmTest', function(e){
			//e.preventDefault(); // enable this line, if you are looking for ajax submit
			$("#logs").html('');
			var errorStatus = false;
			var email = $('#email').val();
			var password = $('#password').val();
			var strongPwdPattern = /^(?=.*[!@#$%^&*-])(?=.*[0-9])(?=.*[a-z])(?=.*[A-Z]).{8,}$/;
			var emailPattern = /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/;
			
			if(email == ''){
				$("#logs").append('Email cannot empty!<wp-br/>');
				errorStatus = true;
			}
			
			if(email != ''){
				if(!emailPattern.test(email)){
					$("#logs").append('Enter a valid email address!<wp-br/>');
					errorStatus = true;
				}
				if($('#email').data('checkexist')){
					// call function to check email
					if( checkExistingEmail(email) ){
						$("#logs").append('Email is already existing. Please try another one!<wp-br/>');
						errorStatus = true;
					}
				}
			}
			
			if(password == ''){
				$("#logs").append('Password cannot empty!<wp-br/>');
				errorStatus = true;
			}
			
			if(password != ''){
				if($('#password').data('strongpwd')){
					if(!strongPwdPattern.test(email)){
						$("#logs").append('Password must have atleast one uppercase, one digit, minimum 8 characters length and one special characters. <wp-br/> Use these special characters !@#$%^&*-<wp-br/>');
						errorStatus = true;
					}
				}
			}
			
			if(errorStatus){
				$("#logs").show();
				return false;
			} else {
				$("#logs").hide();
				$("#logs").html('');
				return true;
			}
			
		});
		
		/*
		## function to check existing email using ajax call.
		*/
		function checkExistingEmail(email){
			var returnStatus = false;
			$.ajax({
				async: false,
				method: 'POST',
				url: 'ajax-email.php',
				data: {email: email},
				dataType: 'json',
				success: function(response){
					console.log(response);
					if(response.status){
						returnStatus = true;
					}else{
						returnStatus = false;
					}
				}
			}).fail(function(){
				$("#logs").append('Something wrong with Ajax call!<wp-br/>');
				returnStatus = false;
			});
			
			return returnStatus;
		}
	})(jQuery);

3. Ajax PHP script

if(isset($_POST['email']) && $_POST['email'] != ''){
		/*
			// run SQL query to check email in database.
			$sqlQuery = "SELECT email FROM users where email = '".$_POST['email']."' ";
			$queryRes = mysql_query($sqlQuery);
			$rowData = mysql_fetch_assoc($queryRes);
			$data['email'] = $rowData['email'];
		*/
		
		$data['email'] = '[email protected]';
		
		if($data['email'] == $_POST['email']){
			$return['status'] = true;
		}else{
			$return['status'] = false;
		}
		
		echo json_encode($return);
	}