This tutorial concerns about creating a login form and validating it using  jQuery. The prestored  username, password are verified from database whether both exist’s or not in our database, this is done using PHP script .

Here we have created a simple HTML form with two fields- Email and Password. jQuery validation is used for email and password to ensure that they are valid or not .

You can download the zip file or simply follow our code and edit it to use.

-:See Also:-

jQuery Registration Form


HTML File: login.html

Given below our complete HTML code , copy to use it.

<!DOCTYPE html>
<title>Login Form Using jQuery - Demo Preview</title>
<meta name="robots" content="noindex, nofollow">
<!-- Include CSS File Here -->
<link rel="stylesheet" href="css/style.css"/>
<!-- Include CSS File Here -->
<script src=""></script>
<script type="text/javascript" src="js/login.js"></script>
<div class="container">
<div class="main">
<form class="form" method="post" action="#">
<h2>Create Login Form Using jQuery</h2>
<label>Email :</label>
<input type="text" name="demail" id="email">
<label>Password :</label>
<input type="password" name="password" id="password">
<input type="button" name="login" id="login" value="Login">

jQuery File:  login.js

Given below our complete jQuery code.

var email = $("#email").val();
var password = $("#password").val();
// Checking for blank fields.
if( email =='' || password ==''){
$('input[type="text"],input[type="password"]').css("border","2px solid red");
$('input[type="text"],input[type="password"]').css("box-shadow","0 0 3px red");
alert("Please fill all fields...!!!!!!");
}else {
$.post("login.php",{ email1: email, password1:password},
function(data) {
if(data=='Invalid Email.......') {
$('input[type="text"]').css({"border":"2px solid red","box-shadow":"0 0 3px red"});
$('input[type="password"]').css({"border":"2px solid #00F5FF","box-shadow":"0 0 5px #00F5FF"});
}else if(data=='Email or Password is wrong...!!!!'){
$('input[type="text"],input[type="password"]').css({"border":"2px solid red","box-shadow":"0 0 3px red"});
} else if(data=='Successfully Logged in...'){
$('input[type="text"],input[type="password"]').css({"border":"2px solid #00F5FF","box-shadow":"0 0 5px #00F5FF"});
} else{

PHP Script: login.php

Below script executes for matching email and password in database.

$connection = mysql_connect("localhost", "root", ""); // Establishing connection with server..
$db = mysql_select_db("college", $connection); // Selecting Database.
$email=$_POST['email1']; // Fetching Values from URL.
$password= sha1($_POST['password1']); // Password Encryption, If you like you can also leave sha1.
// check if e-mail address syntax is valid or not
$email = filter_var($email, FILTER_SANITIZE_EMAIL); // sanitizing email(Remove unexpected symbol like <,>,?,#,!, etc.)
if (!filter_var($email, FILTER_VALIDATE_EMAIL)){
echo "Invalid Email.......";
// Matching user input email and password with stored email and password in database.
$result = mysql_query("SELECT * FROM registration WHERE email='$email' AND password='$password'");
$data = mysql_num_rows($result);
echo "Successfully Logged in...";
echo "Email or Password is wrong...!!!!";
mysql_close ($connection); // Connection Closed.

CSS File: style.css

Styling HTML Elements.

/* Below line is used for online Google font */
@import url(;
text-align: center;
font-size: 24px;
margin-bottom: 30px;
width: 960px;
height: 610px;
margin:50px auto;
font-family: 'Droid Serif', serif;
width: 320px;
margin-top: 80px;
padding: 10px 55px 40px;
background-color: rgba(187, 255, 184, 0.65);
border: 15px solid white;
box-shadow: 0 0 10px;
border-radius: 2px;
font-size: 13px;
input[type=text],[type=password] {
width: 97.7%;
height: 34px;
padding-left: 5px;
margin-bottom: 20px;
margin-top: 8px;
box-shadow: 0 0 5px #00F5FF;
border: 2px solid #00F5FF;
color: #4f4f4f;
font-size: 16px;
color: #464646;
text-shadow: 0 1px 0 #fff;
font-size: 14px;
font-weight: bold;
#login {
width: 100%;
background: linear-gradient(#22abe9 5%, #36caf0 100%);
border: 1px solid #0F799E;
font-size: 20px;
margin-top: 15px;
padding: 8px;
font-weight: bold;
cursor: pointer;
color: white;
text-shadow: 0px 1px 0px #13506D;
background: linear-gradient(#36caf0 5%, #22abe9 100%);


This was all about creating simple login form with validation and database connectivity.  Hope you have liked it, keep reading our other blogs for getting attached with more coding tricks.