<form id="form" class="blocks" action="#" method="post">  
<p>  
<label>Имя:</label>  
<input type="text" class="text" name="name" />  
</p>  
<p>  
<label>Компания:</label>  
<input type="text" class="text" name="company" />  
</p>  
<p>  
<label>Ваш e-mail:</label>  
<input type="text" class="text" name="email" />  
</p>  
<p>  
<label>Телефон:</label>  
<input type="text" class="text" name="phone" />  
</p>  
<p class="area">  
<label>Сообщение:</label>  
<textarea class="textarea" name="message"></textarea>  
</p>  
<p>  
<label> </label>  
<input type="submit" class="btn" value="Отправить" />  
</p>  
  </form>

.blocks p {  
margin-bottom:15px;  
position:relative;  
}  
   
.btn {  
display:block;  
float:left;  
height:31px;  
line-height:31px;  
padding:0 10px;  
background:url(/images/bgbtn.jpg) repeat-x;  
color:#565e62;  
font-weight:bold;  
font-size:11px;  
border:1px solid #e1e0df;  
outline:none;  
}  
   
.text,  
.textarea {  
padding:5px 10px;  
height:27px;  
border:1px solid #ddd;  
color:#333;  
background:url(/images/bginput.jpg) repeat-x bottom #fff;  
position:relative;  
z-index:2;  
}  
   
.text {  
width:220px;  
}  
   
.textarea {  
height:150px;  
width:350px;  
}  
   
.blocks label {  
float:left;  
width:100px;  
line-height:37px;  
text-align:right;  
margin-right:15px;  
font-weight:bold;  
color:#666;  
}  
   
.blocks label.error,  
.blocks label.ok {  
position:absolute;  
z-index:1;  
top:-4px;  
left:110px;  
padding:5px 15px 5px 280px;  
   
/* Reseting previous label values */  
width:auto;  
text-align:left;  
margin:0;  
background-repeat:no-repeat;  
background-position:257px 16px;  
}  
   
.blocks label.ok {  
background-image:url(/images/icook.gif);  
background-color:#deefca;  
color:#577530;  
}  
   
.blocks label.error {  
background-image:url(/images/icofail.gif);  
background-color:#f5d6d7;  
color:#c81925;  
}  
   
.area label.ok,  
.area label.error {  
height:163px;  
padding-left:410px;  
background-position:387px 16px;  
}  
   
/* CSS3 */  
.btn, .text, .textarea, .blocks label.error, .blocks label.ok {  
-moz-border-radius:8px;  
-webkit-border-radius:8px;  
border-radius:8px;  
}

jQuery :  
Выделить всё
$(function(){  
   
  $("#form").validate({  
  rules: {  
  name: {  
  required: true,  
  minlength: 3  
  },  
  company: {  
  required: true  
  },  
  phone: {  
  required: true,  
  number: true,  
  minlength: 6  
  },  
  email: {  
  required: true,  
  email: true  
  },  
  message: {  
  required: true  
  }  
  },  
  messages: {  
  name: {  
  required: 'Обязательное поле',  
  minlength: 'Мин. длина: 3'  
  },  
  company: {  
  required: 'Обязательное поле'  
  },  
  phone: {  
  required: 'Обязательное поле',  
  number: 'Недопустимый номер',  
  minlength: 'Мин. длина: 6'  
  },  
  email: 'Недопустимый e-mail',  
  message: {  
  required: 'Обязательное поле'  
  }  
  },  
  success: function(label) {  
  label.html('OK').removeClass('error').addClass('ok');  
  setTimeout(function(){  
  label.fadeOut(500);  
  }, 2000)  
  }  
  });  
   
});