Howi.In

<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
<a href="http://3.bp.blogspot.com/-X1lCjeIiq6I/Vn_30JiZ2MI/AAAAAAAAHJU/WE_BoE7-_fc/s1600/Login%2BValidation%2BUsing%2BJquery-min.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img alt="Login Validation Form Using Jquery" border="0" src="https://3.bp.blogspot.com/-X1lCjeIiq6I/Vn_30JiZ2MI/AAAAAAAAHJU/WE_BoE7-_fc/s1600/Login%2BValidation%2BUsing%2BJquery-min.png" title="Login Validation Form Using Jquery" /></a></div>
<h2 style="text-align: left;">
Introduction:</h2>
<div>
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.</div>
<h4 style="text-align: left;">
Take a Look to Demo also Download the Ready-Made Script:</h4>
<div>
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.</div>
<div>
<br /></div>
<div>
<b>Demo: </b><a href="http://forum.howi.in/Downloads/login/demo/form.php" rel="nofollow" target="_blank">Click here to see the Demo.</a></div>
<div>
<b>Download: </b><a href="https://app.box.com/s/0lmfgvuuwzycrl9mhg5cpt501z26afwl" rel="nofollow" target="_blank">Click here to Download the script.</a><br />
<h4 style="text-align: left;">
Documentation of Jquery Login Validation Script:</h4>
</div>
<div>
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 "<b>Edit</b>" the "<b>form.php</b>" with your design. You can redesign it with your <b>CSS Style</b> and coding. </div>
<pre class="brush: js;" style="text-align: left;"><form id="myForm" action="process.php" method="POST">
<div id="box">
<label>Username:</label><br>
<input type="text" name="username" class="input"/><br />
<label>Password</label><br>
<input type="password" name="password" class="input"/><br />
<button id="submit" class="button button-primary">Login-In</button>
<br>
<br>
<div id="ack" style="color:red"></div>
<h3>Click on the "Log-in" Button
</div>
</form></pre>
Inside the <b><form> </b>Tag you can see <b>id="myForm"</b> Jquery using that <b>ID</b> to identify the form that we are posting variables.<br />
<div>
<br />
<b><div id="ack" style="color:red"></div> </b>The <b>id="ack"</b> inside the <b><div></b> Tag is used to display the validation alerts of Login Form.<br />
<ul>
</ul>
<div>
You have to embed the Jquery Javascript inside your "<b>form.php</b>" Login page to work the validation. Otherwise, it will not work.<br />
<pre class="brush: js;"><script type="text/javascript" src="jquery.min.js"></script></pre>
<div>
You also need to embed the "<b>my_script.js</b>" Javascript inside the script for "<b>form.php</b>" page. The script inside the "<b>my_script.js</b>" work behind and send the validation messages by executing it through"<b>process.php</b>" then send it to <b>id="ask </b>on "<b>form.php</b>".<br />
<pre class="brush: js;"><script type="text/javascript" src="my_script.js"></script></pre>
<div style="text-align: left;">
Here you can see the code that programmed inside the "<b>myscript.js</b>" file. All the validation message from "<b>process.php</b>" page will display on the "<b>form.php</b>" using "<b>myscript.js</b>".</div>
<pre class="brush: js;">$("#submit").click( function() {
 $("#ack").html('<img src="ajax-loader.gif">LOADING');
  $.post( $("#myForm").attr("action"),
          $("#myForm :input").serializeArray(),
    function(info) {
 
      $("#ack").empty();
      $("#ack").html(info);
    });
 
 $("#myForm").submit( function() {
    return false; 
 });
});</pre>
The <b>$("#ack").html('<img src="ajax-loader.gif">LOADING'); </b>on the above code will help the "<b>form.php</b>" will display a loading image before the exection take place in "<b>process.php</b>".<br />
<pre class="brush: js;"><?php
$msg = array("Username Was Empty","Password Was Empty");
if($_POST)
{

$username = $_POST['username'];
 $password = $_POST['password'];
 
       if(empty($username))
    {
    echo $msg[0]; 
    }
    else if(empty($password))
    {
    echo $msg[1];  
    }
}
?></pre>
The <b>$msg = array("Username Was Empty","Password Was Empty"); </b>array will help to store the validation message inside the "<b>process.php</b>" page. You can also add more validation messages inside the array and show it by "<b>$msg[0]</b>" Change the "<b>0</b>" with the message error position in the array.<br />
<h4 style="text-align: left;">
Suggested Article for Programmers:</h4>
</div>
</div>
</div>
<div>
<ul style="text-align: left;">
<li><a href="http://www.howi.in/2015/12/facebook-push-notification-system-for-your-website.html">Facebook Push Notification System for Websites.</a></li>
<li><a href="http://www.howi.in/2014/09/create-your-own-live-cricket-score-wapsite.html" target="_blank">Create Own Live Cricket Score Website Using PHP API Script.</a></li>
<li><a href="http://www.howi.in/2014/10/create-your-own-video-streaming-wapsite-like-youtube-mobile-site.html" target="_blank">Create Own Youtube Like Site Using Youtube API PHP Script.</a></li>
<li><a href="http://www.howi.in/2015/11/add-ckeditor-in-php-page-step-by-step-tutorial.html" target="_blank">Add CKEditor to Your PHP Page.</a></li>
</ul>
<div>
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.</div>
</div>
</div>

Simple Login Validation Form Using Jquery

Introduction: The world of website development was changing day by day with new innovative Technologies. Programming languages like Aj...

+ Read more »