jQuery user registration form validation will avoid some improper registration. Every registration web form should have a validation. when we implement registration form without validation, user may submit null values and many problems will occur, which leads our site to be more vulnerable. Here i have implemented registration page with 5 values( username, password, re-enter password, email and gender)
CSS for the registration form.
[code type=css]
<style type=”text/css”>
#dis
{
text-align:center;
height: 25px;
width: 250px;
background-color:#46DAFF;
color:#000;
}
#tex
{
width:120px;
float: left;
}
</style>
[/code]
jQuery code and html code is given below.
$(‘#submit’).click(function() – When submit button is clicked, this jquery function is triggered.
var user=$(‘#user’).val(); – Data given in username field will be get through ID value and stored in variable called user. Likewise all field values will stored in a variable.
$(‘#dis’).slideDown().html(“<span>Please type Username</span>”); – This slidedown() function will be called, when we give username as empty. Likewise all fields validation will work.
[code type=html]
<html>
<head>
<title>Jquery Registration 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 user=$(‘#user’).val();
var pass=$(‘#pass’).val();
var rpass=$(‘#rpass’).val();
var email=$(‘#email’).val();
var gender=$(‘#gender’).val();
if(user==””)
{
$(‘#dis’).slideDown().html(“<span>Please type Username</span>”);
return false;
}
if(pass==””)
{
$(‘#dis’).slideDown().html(‘<span id=”error”>Please type Password</span>’);
return false;
}
if(rpass==””)
{
$(‘#dis’).slideDown().html(‘<span id=”error”>Again type Password</span>’);
return false;
}
if(pass!=rpass)
{
$(‘#dis’).slideDown().html(‘<span id=”error”>Password mismatch</span>’);
return false;
}
if(email==””)
{
$(‘#dis’).slideDown().html(‘<span id=”error”>Please type email</span>’);
return false;
}
var filter = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;
if(!filter.test(email))
{
$(‘#dis’).slideDown().html(‘<span id=”error”>Please type correct email</span>’);
return false;
}
if ($(“#gender:checked”).length = 0){
$(‘#dis’).slideDown().html(‘<span id=”error”>Please choose gender</span>’);
return false;
}
});
});
</script>
</head>
<body>
<fieldset style=”width:290px;”>
<form method=”post” action=””>
<h1 style=”font-size:18px;”>Jquery Registration page validation</h1>
<label id=”dis” style=”width:250px;”></label><br>
<div id=”tex”>Username:</div>
<input type=”text” name=”user” id=”user” /><br /><br />
<div id=”tex”>Password:</div>
<input type=”password” name=”pass” id=”pass” /><br /><br />
<div id=”tex”>Re-type Password:</div>
<input type=”password” name=”pass” id=”rpass” /><br /><br />
<div id=”tex”>Email:</div>
<input type=”text” name=”email” id=”email”><br /><br />
<div id=”tex”>Gender:</div>
<input type=”radio” name=”gender” id=”gender”> Male
<input type=”radio” name=”gender” id=”gender”> Female<br>
<br>
<center><input type=”submit” name=”submit” id=”submit” /></center>
</form>
</fieldset>
</body>
</html>
[/code]
superb code…….but if the validation data is in another file and how to call in the registration form……for me the value is not returning pls say urgent………
i can’t understand. Pls explain detailed
I want to validate username from server to check whether it’s available or not. How could we communicate with the server.
Chk this article http://freezecoders.com/2012/10/live-check-in-database-using-php-ajax.html
Hi,
Can I use this type of user registration and login form in blogger???
Please tell me.
Thanks,
Amit
Do Not Trust the Click Event of the submit button.
A form can be submitted without clicking the button and the button can be activated without using the mouse.
Always attach to the submit event of the form tag/object ( $(‘form’).on(‘submit’,…. )
And you will still have to validate the values on the server side, as one could submit the form without js or even without using the webpage at all ( curl for example )