Every Login form should have client side validation. If we have not used client side validation, our code will go to server and check the username and password, it will increase server traffic. By using client side validation null username and password can be filtered in browser itself, so that we can reduce server traffic.
Here is the code
[code type=css]
<style type=”text/css”>
#dis
{
text-align:center;
height: 25px;
width: 250px;
background-color:#46DAFF;
color:#000;
}
</style>
[/code]
jQuery Validation for login page is given below.
$(‘#submit’).click(function() – Submit button having ID as submit, when submit button is clicked control comes inside this function.
var username=$(‘#user’).val(); – Text box with ID user’s value will be stored in variable username.
var password=$(‘#pass’).val(); – Text box with ID pass‘s value will be stored in variable password.
if(username==””) – if username is empty, this if loop will work. Likewise for password.
$(‘#dis’).slideDown().html(“<span>Please type Username</span>”); – Error message will be displayed in label having ID dis with slidedown effect
return false; – When return type is false, page won’t refresh (i.e., php code won’t work)
[code type=html]
<html>
<head>
<title>Jquery login page validation</title>
<script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js”>
</script>
<script type=”text/javascript”>
$(document).ready(function(){
$(‘#submit’).click(function(){
var username=$(‘#user’).val();
var password=$(‘#pass’).val();
if(username==””)
{
$(‘#dis’).slideDown().html(“<span>Please type Username</span>”);
return false;
}
if(password==””)
{
$(‘#dis’).slideDown().html(‘<span id=”error”>Please type Password</span>’);
return false;
}
});
});
</script>
</head>
<body>
<fieldset style=”width:250px;”>
<form method=”post” action=”index.php”>
Jquery login page validation
<label id=”dis”></label><br>
Username: <input type=”text” name=”user” id=”user” /><br />
Password: <input type=”password” name=”pass” id=”pass” /><br /><br />
<center><input type=”submit” name=”submit” id=”submit” /></center>
</form>
</fieldset>
</body>
</html>
[/code]
I appreciate this post. I really find validation can be done in some many ways for web forms. We still leverage server side validation because we’ve built our own controls to generate controls, e.g., textfield, textarea, spinner, etc. and these all take into account validation failures so that we can consistently markup the form with necessary indication of failures.
Additionally, though Javascript prevents making the rpc call in most cases this is very little overhead.
Even though simple example but good explanation.
Thank you!!!!!!
good example simple but clear
Thanks…Good explanation..
Is it necessary to add Validation plugin for this project??
Nice one, Thanks
Its very usefull to me….and simple