case test jquery.validate
HTML
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.8.1/jquery.validate.min.js"></script>
<form action="#" method="post">
<label>Name</label>
<input type="text" name="name" class="required" value="" />
<label>Email</label>
<input type="email" name="email" class="required" value="" />
<label>Message</label>
<textarea name="message" class="required"></textarea>
<input type="submit" name="save" value="Save" class="hide" />
</form>
CSS
.hide { display: none }
form label {
clear: both;
display: inline;
float: left;
font-size: 19px;
line-height: 20px;
margin: 4px 10px;
padding: 5px 0;
text-align: right;
width: 100px;
}
form label.error {
float: none;
color: red;
width: auto;
text-align: left;
display: block;
font-size; 11px;
margin-left: 130px
}
form input, form textarea, form select {
border: 1px solid #555;
padding: 5px 4px;
color: #000000;
font-size: 15px;
line-height: 16px;
display: inline-block;
float: left;
margin: 4px 0;
background: #D0D0D0;
-moz-border-radius:2px;
-webkit-border-radius:2px;
border-radius:2px;
}
form input[type=submit] {
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
line-height: 20em;
padding: 2px 7px;
width: auto;
margin: 10px 10px 0 0;
}
JavaScript
$('form').validate();