jQuery User Registration form Validation

By | September 25, 2012

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]

6 thoughts on “jQuery User Registration form Validation

  1. mathi

    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………

    Reply
  2. pankaj

    I want to validate username from server to check whether it’s available or not. How could we communicate with the server.

    Reply
  3. amit

    Hi,

    Can I use this type of user registration and login form in blogger???

    Please tell me.

    Thanks,
    Amit

    Reply
  4. Foppel

    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 )

    Reply

Leave a Reply to prasad k Cancel reply

Your email address will not be published. Required fields are marked *