Login Validation Form Using Jquery


The world of website development was changing day by day with new innovative Technologies. Programming languages like Ajax, Jquery, Etc were contributed a lot to Website Development world. Developers were using Ajax and Jquery for many purposes. Mainly they are using this kind of programming languages to execute programs behind browser interface and show them result without letting the visitor know about the execution. In simply we can say that visitor will not get his browser reload after clicking a sign-in button or fill-up a textbox. Through this article, you are going to learn about the development of a simple Login Validation Form using Jquery.

Take a Look to Demo also Download the Ready-Made Script:

The Demo page will help you to understand what you are going to learn through this article, or you can verify whether this article full-fill you needs. If the Demo was good, then feel free Download of the Ready-Made script that we developed. It will help you successful development and integration.

Download: Click here to Download the script.

Documentation of Jquery Login Validation Script:

It is very easy to Implement the Login Validation script in your website or mobile site. All you want to do that, Just download the script and "Edit" the "form.php" with your design. You can redesign it with your CSS Style and coding. 
<form id="myForm" action="process.php" method="POST">
<div id="box">
<input type="text" name="username" class="input"/><br />
<input type="password" name="password" class="input"/><br />
<button id="submit" class="button button-primary">Login-In</button>
<div id="ack" style="color:red"></div>
<h3>Click on the "Log-in" Button
Inside the <form> Tag you can see id="myForm" Jquery using that ID to identify the form that we are posting variables.

<div id="ack" style="color:red"></div> The id="ack" inside the <div> Tag is used to display the validation alerts of Login Form.
You have to embed the Jquery Javascript inside your "form.php" Login page to work the validation. Otherwise, it will not work.
<script type="text/javascript" src="jquery.min.js"></script>
You also need to embed the "my_script.js" Javascript inside the script for "form.php" page. The script inside the "my_script.js" work behind and send the validation messages by executing it through"process.php" then send it to id="ask on "form.php".
<script type="text/javascript" src="my_script.js"></script>
Here you can see the code that programmed inside the "myscript.js" file. All the validation message from "process.php" page will display on the "form.php" using "myscript.js".
$("#submit").click( function() {
 $("#ack").html('<img src="ajax-loader.gif">LOADING');
  $.post( $("#myForm").attr("action"),
          $("#myForm :input").serializeArray(),
    function(info) {
 $("#myForm").submit( function() {
    return false; 
The $("#ack").html('<img src="ajax-loader.gif">LOADING'); on the above code will help the "form.php" will display a loading image before the exection take place in "process.php".
$msg = array("Username Was Empty","Password Was Empty");

 $username = $_POST['username'];
 $password = $_POST['password'];
    echo $msg[0]; 
    else if(empty($password))
    echo $msg[1];  
The $msg = array("Username Was Empty","Password Was Empty"); array will help to store the validation message inside the "process.php" page. You can also add more validation messages inside the array and show it by "$msg[0]" Change the "0" with the message error position in the array.

Suggested Article for Programmers:

I hope you well enjoyed this article. If you have any doubts related to this article. Please let us know by using the comment box that given below this article. Thanks.