User Login Form Validation using Ajax in PHP

To create User Login Form Validation using Ajax in PHP, first, we create major files which we connected to each other. Here we create a PHP script to get the data and for database connection and create a JS file for Ajax validation.

After checking the complete source code you can also download it from the given link at the end of the tutorial.

Check live view below.

Here is the list of files that we create on the Username and password validation process,

index.php: Here we create HTML Bootstrap input fields.
ajaxValidation.js: Create email validation function and PHP Ajax request to validate the user.
config.php: On this file, we create a database connection.
showData.php: If validation success, this file used to show the user data.

Before start create a database and paste the below code on the SQL tab on phpMyAdmin,

CREATE TABLE `users` (
  `id` int(11) NOT NULL,
  `username` varchar(80) NOT NULL,
  `name` varchar(80) NOT NULL,
  `password` varchar(80) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

INSERT INTO `users` (`id`, `username`, `name`, `password`) VALUES
(1, 'yourmail@gmail.com', 'yourName', '123456');

ALTER TABLE `users`
  ADD PRIMARY KEY (`id`);

ALTER TABLE `users`
  MODIFY `id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=2;
COMMIT;

CREATE TABLE `users` (

`id` int(11) NOT NULL,

`username` varchar(80) NOT NULL,

`name` varchar(80) NOT NULL,

`password` varchar(80) NOT NULL

) ENGINE=InnoDB DEFAULT CHARSET=latin1;

INSERT INTO `users` (`id`, `username`, `name`, `password`) VALUES

(1, 'yourmail@gmail.com', 'yourName', '123456');

ALTER TABLE `users`

ADD PRIMARY KEY (`id`);

ALTER TABLE `users`

MODIFY `id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=2;

COMMIT;

Now we create complete source code for Username and password validation in PHP using AJAX,

index.php

<!DOCTYPE html>
<html>
<head>
  <title>Username and password validation in PHP using AJAX</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
  <script type="text/javascript" src="ajaxValidation.js"></script>
  <style type="text/css">
    li{color: red;}
  </style>
</head>
<body>
  <div class="container col-md-5">
    <div class="mb-3">
      <label for="exampleFormControlInput1" class="form-label">Email address</label>
      <input type="email" class="form-control" id="userEmail" placeholder="name@example.com" onblur="validateEmail(this);">
    </div>
    <div class="mb-3">
      <label for="inputPassword" class="col-sm-2 col-form-label">Password</label>
      <input type="password" class="form-control" id="userPassword" placeholder="******">
    </div>
    <p id="message"></p>
    <div class="mb-3 col-md-4">
      <button class="form-control btn btn-danger" id="checkValidation">Validation Check</button>
    </div>
  </div>
</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>Username and password validation in PHP using AJAX</title>

li{color: red;}

</style>

</head>

<body>

<label for="exampleFormControlInput1" class="form-label">Email address</label>

</div>

<label for="inputPassword" class="col-sm-2 col-form-label">Password</label>

</div>

<button class="form-control btn btn-danger" id="checkValidation">Validation Check</button>

</div>

</body>

</html>

Here are 3 major things,

Set ID attribute on input fields to get user input data via Ajax.
Use the ID attribute to check the form submitted by the user using Ajax.
Create email validation function on email input which works onBlur event.

config.php

<?php
session_start();
$host = "localhost"; /* Host name */
$user = "root"; /* User */
$password = ""; /* Password */
$dbname = "user_data"; /* Database name */

$con = mysqli_connect($host, $user, $password,$dbname);
// Check connection
if (!$con) {
  die("Connection failed: " . mysqli_connect_error());
}

<?php

session_start();

$host = "localhost"; /* Host name */

$user = "root"; /* User */

$password = ""; /* Password */

$dbname = "user_data"; /* Database name */

$con = mysqli_connect($host, $user, $password,$dbname);

// Check connection

if (!$con) {

die("Connection failed: " . mysqli_connect_error());

}

ajaxValidation.js

function validateEmail(emailField){
  var reg = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;

  if (reg.test(emailField.value) == false) 
  {
    $("#message").html("<li>Invalid Email Address</li>");
    return false;
  }
  $("#message").html("");
    return true;
}

$(document).ready(function(){
  $("#checkValidation").click(function(){
    var username = $("#userEmail").val().trim();
    var password = $("#userPassword").val().trim();
    $.ajax({
      url:'showData.php',
      type:'post',
      data:{username:username,password:password},
      success:function(response){
        $("#message").html(response);
      }
    });
  });
});

function validateEmail(emailField){

var reg = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;

if (reg.test(emailField.value) == false)

{

$("#message").html("<li>Invalid Email Address</li>");

return false;

}

$("#message").html("");

return true;

}

$(document).ready(function(){

$("#checkValidation").click(function(){

var username = $("#userEmail").val().trim();

var password = $("#userPassword").val().trim();

$.ajax({

url:'showData.php',

type:'post',

data:{username:username,password:password},

success:function(response){

$("#message").html(response);

}

});

Code Explanations:

On this, first, we create an email validation function, which validates on onBlur event.
After that takes user data and sends it to the PHP script to check whether the data is valid or not and then prints it on the HTML page using paragraph ID.

showData.php

<?php
include "config.php";
if($_POST['username'] == '' || $_POST['password'] == ''){
  foreach ($_POST as $key => $value) {
      echo "<li>Please Enter ".$key.".</li>";
  }
  exit();
}
$userName = mysqli_real_escape_string($con,$_POST['username']);
$password = mysqli_real_escape_string($con,$_POST['password']);

$sql_query = "select * from users where username='".$userName."' and password='".$password."'";
$result = mysqli_query($con,$sql_query);
$row = mysqli_fetch_array($result);
if($row){
    echo "<b>Your Details:</b><br/>".$row['username']."<br/>".$row['name'];
    exit();
}else{
    echo "<li>Invlid Username or password.</li>";
    exit();
}

<?php

include "config.php";

if($_POST['username'] == '' || $_POST['password'] == ''){

foreach ($_POST as $key => $value) {

echo "<li>Please Enter ".$key.".</li>";

}

exit();

}

$userName = mysqli_real_escape_string($con,$_POST['username']);

$password = mysqli_real_escape_string($con,$_POST['password']);

$sql_query = "select * from users where username='".$userName."' and password='".$password."'";

$result = mysqli_query($con,$sql_query);

$row = mysqli_fetch_array($result);

if($row){

echo "<b>Your Details:</b><br/>".$row['username']."<br/>".$row['name'];

exit();

}else{

echo "<li>Invlid Username or password.</li>";

exit();

}

Code Explanations:

Here we heck the inputs first by post method, if the input is empty then we print the message and exit the execution then the message will print on the HTML page.
Created a query for checking UserName and Password, if both are correct then we show the detail of that user. Otherwise, print the error message by Ajax code.