User Registration Form with validation In jQuery

User form is very necessary for those site which only allow register member, With out it you may face many problem so to void it i personally recommend to add registration form with validation, so that user can not submit null values.this registration validate five values.

first is the name

second is password

third is confirm password

forth is email

five one is gender.

Css of the registration form

$(‘#submit’).click(function() - When user press submit, this jquery function is triggered

var user=$(‘#user’).val(); - Data enter in username field will be get through ID value and stored in variable called user.

jquery and html code.

<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;
}

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

5g blogger seo

Search Blog

User Registration Form with validation In jQuery

No comments:

Post a Comment