Cracker World : Contact Form with jquery validation

This simple j query validation for contact form that consists of name email url(website) and message that all field are required and valid details .

Download Demo

J query script and files

CSS

Html

<fieldset>
<legend>Contact Form</legend>
<form id="contact_form" method="post">
<dl>
<dt><label for="cname" class="control-label">Name (required)</label></dt>
<dd><input id="cname" name="name" minlength="2" type="text" required /></dd>
</dl>
<dl><dt>
<label for="cemail" class="control-label">E-Mail (required)</label></dt><dd>
<input id="cemail" type="email" name="email" required /> </dd>
</dl>
<dl>
<dt><label for="curl" class="control-label">URL (optional)</label></dt>
<dd><input id="curl" type="url" name="url" /> </dd>
</dl>
<dl>
<dt><label for="ccomment" class="control-label">Your Comment (required)</label></dt>
<dd><textarea id="ccomment" name="comment" required></textarea> </dd>
</dl>
<div align="center">
<button class="green" type="submit">Save</button>
<button class="red" 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>Contact From with jquery validation</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() {
$("#contact_form").validate();
});
</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>
<h2><a href="http://crackerworld.blogspot.in/">Cracker World</a></h2>
<fieldset>
<legend><h4>Contact Form</h4></legend>
<form id="contact_form" method="post">
<dl>
<dt><label>Name (required)</label></dt>
<dd><input name="name" minlength="2" type="text" required /></dd>
</dl>
<dl><dt>
<label>E-Mail (required)</label></dt>
<dd><input type="email" name="email" required /> </dd>
</dl>
<dl>
<dt><label>URL (optional)</label></dt>
<dd><input id="curl" type="url" name="url" /> </dd>
</dl>
<dl>
<dt><label >Your Comment (required)</label></dt>
<dd><textarea name="comment" required></textarea> </dd>
</dl>

<div align="center">
<button class="green" type="submit">Save</button>
<button class="red" type="reset">Cancel</button>
</div>
</form>
</fieldset>
</body>
</html>

Pages

Contact Form with jquery validation

J query script and files

CSS

Html

Full coding

No comments:

Post a Comment