Register Form With j query validation

This simple j query validation for register form.it consists username first name  last name,password Confirm password email,and i agree.




Jquery Validation

<script src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="js/jquery.validate.min.js"></script>

jquery validation

<script>
$().ready(function() {
$("#signupForm").validate({
rules: {
firstname: "required",
lastname: "required",
username: {
required: true,
minlength: 2
},
password: {
required: true,
minlength: 5
},
confirm_password: {
required: true,
minlength: 5,
equalTo: "#password"
},
email: {
required: true,
email: true
},
topic: {
required: "#newsletter:checked",
minlength: 2
},
agree: "required"
},
messages: {
firstname: "Please enter your firstname",
lastname: "Please enter your lastname",
username: {
required: "Please enter a username",
minlength: "Your username must consist of at least 2 characters"
},
password: {
required: "Please provide a password",
minlength: "Your password must be at least 5 characters long"
},
confirm_password: {
required: "Please provide a password",
minlength: "Your password must be at least 5 characters long",
equalTo: "Please enter the same password as above"
},
email: "Please enter a valid email address",
agree: "Please accept our policy"
}
});
});
</script>

Html


<fieldset>
<legend>Register Form</legend>
<form id="signupForm" method="post">
<dl><dt>
<label for="firstname" class="control-label">Firstname</label>
</dt><dd>
<input class="span6 " id="firstname" name="firstname" type="text" />
</dd></dl>
<dl><dt>
<label for="lastname" class="control-label">Lastname</label>
</dt><dd>
<input class="span6 " id="lastname" name="lastname" type="text" />
</dd></dl>
<dl><dt>
<label for="username" class="control-label">Username</label>
</dt><dd>
<input class="span6 " id="username" name="username" type="text" />
</dd></dl>
<dl><dt>
<label for="password" class="control-label">Password</label>
</dt><dd>
<input class="span6 " id="password" name="password" type="password" />
</dd></dl>
<dl><dt>
<label for="confirm_password" class="control-label">Confirm Password</label>
</dt><dd>
<input class="span6 " id="confirm_password" name="confirm_password" type="password" />
</dd></dl>
<dl><dt>
<label for="email" class="control-label">Email</label>
</dt><dd>
<input class="span6 " id="email" name="email" type="email" />
</dd></dl>
<dl><dt>
<label for="agree" class="control-label">Agree to Our Policy</label>
</dt><dd>
<input type="checkbox" class="checkbox" id="agree" name="agree" />
</dd></dl>
<dl><dt>
<label for="newsletter" class="control-label">Receive the Newsletter</label>
</dt><dd>
<input type="checkbox" class="checkbox" id="newsletter" name="newsletter" />
</dd></dl>

<div align="center">
<button class="btn btn-success" type="submit">Save</button>
<button class="btn" type="reset">Cancel</button>
</div>

</form>
</fieldset>

Full Coding


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Register Form</title>
<script src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="js/jquery.validate.min.js"></script>
<script>
$().ready(function() {
$("#signupForm").validate({
rules: {
firstname: "required",
lastname: "required",
username: {
required: true,
minlength: 2
},
password: {
required: true,
minlength: 5
},
confirm_password: {
required: true,
minlength: 5,
equalTo: "#password"
},
email: {
required: true,
email: true
},
topic: {
required: "#newsletter:checked",
minlength: 2
},
agree: "required"
},
messages: {
firstname: "Please enter your firstname",
lastname: "Please enter your lastname",
username: {
required: "Please enter a username",
minlength: "Your username must consist of at least 2 characters"
},
password: {
required: "Please provide a password",
minlength: "Your password must be at least 5 characters long"
},
confirm_password: {
required: "Please provide a password",
minlength: "Your password must be at least 5 characters long",
equalTo: "Please enter the same password as above"
},
email: "Please enter a valid email address",
agree: "Please accept our policy"
}
});
});
</script>
<style type="text/css">
body{margin:0;padding:0;font-family:"Arial";}
.error{color:#900;}
fieldset{width:50%;margin:0 auto;border-radius:10px;border:5px #09F solid;}
fieldset form {width:100%;margin:0 auto;}
form dl {width: 100%;padding: 8px 0px;}
form dt {float: left;width: 200px;padding: 10px;line-height: 1px}
form input{width: 30%;height:25px;}
form textarea{width: 30%;height:50px;}
form button{display: inline-block;padding: 4px 12px;margin-bottom: 0px;font-size: 14px;line-height: 20px;color: rgb(51, 51, 51);text-align: center;text-shadow: 0px 1px 1px rgba(255, 255, 255, 0.75);vertical-align: middle;cursor: pointer;background-color: rgb(245, 245, 245);background-image: linear-gradient(to bottom, rgb(255, 255, 255), rgb(230, 230, 230));background-repeat: repeat-x;border-width: 1px;border-style: solid;-moz-border-top-colors: none;-moz-border-right-colors: none;-moz-border-bottom-colors: none;-moz-border-left-colors: none;border-image: none;border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgb(179, 179, 179);border-radius: 4px 4px 4px 4px;box-shadow: 0px 1px 0px rgba(255, 255, 255, 0.2) inset, 0px 1px 2px rgba(0, 0, 0, 0.05);}
.green{background:#008000;color:#FFF;}
.red{background:#990000;color:#FFF;}
</style>
</head>

<body>
<fieldset>
<legend>Register Form</legend>
<form id="signupForm" method="post">
<dl><dt>
<label for="firstname" class="control-label">Firstname</label>
</dt><dd>
<input class="span6 " id="firstname" name="firstname" type="text" />
</dd></dl>
<dl><dt>
<label for="lastname" class="control-label">Lastname</label>
</dt><dd>
<input class="span6 " id="lastname" name="lastname" type="text" />
</dd></dl>
<dl><dt>
<label for="username" class="control-label">Username</label>
</dt><dd>
<input class="span6 " id="username" name="username" type="text" />
</dd></dl>
<dl><dt>
<label for="password" class="control-label">Password</label>
</dt><dd>
<input class="span6 " id="password" name="password" type="password" />
</dd></dl>
<dl><dt>
<label for="confirm_password" class="control-label">Confirm Password</label>
</dt><dd>
<input class="span6 " id="confirm_password" name="confirm_password" type="password" />
</dd></dl>
<dl><dt>
<label for="email" class="control-label">Email</label>
</dt><dd>
<input class="span6 " id="email" name="email" type="email" />
</dd></dl>
<dl><dt>
<label for="agree" class="control-label">Agree to Our Policy</label>
</dt><dd>
<input type="checkbox" class="checkbox" id="agree" name="agree" />
</dd></dl>
<dl><dt>
<label for="newsletter" class="control-label">Receive the Newsletter</label>
</dt><dd>
<input type="checkbox" class="checkbox" id="newsletter" name="newsletter" />
</dd></dl>

<div align="center">
<button class="btn btn-success" type="submit">Save</button>
<button class="btn" type="reset">Cancel</button>
</div>

</form>
</fieldset>

</body>
</html>

Related Links

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)