how to validate a form in jquery using tag name
(ie)
$(function() {
var ele = $("input[type!='submit'], textarea, select");
ele.focus(function(){
$(this).parents('p').addClass('block');
});
ele.blur(function(){
$(this).parents('p').removeClass('block');
});
});
I have attached my code Here,Please check
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="jquery.js" charset="utf-8"></script>
<script type="text/javascript" src="javasc.js" charset="utf-8"></script>
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
<script type="text/javascript">
//$(function() {
//var ele = $("input[type!='submit'], textarea, select");
//ele.focus(function(){
//// $(this).parents('p').addClass('block');
//});
//ele.blur(function(){
// $(this).parents('p').removeClass('block');
//});
//});
</script>
</head>
<body>
<div id="content">
<form id="jform" action="# method="post">
<fieldset>
<legend>Personal Information</legend>
<p>
<label for="fullname" class="block"><h3>Name</h3></label>
<input type="text" name="fullname" id="fullname" />
</p>
<p><h3>Email Address</h3>
<label for="email" class="block"> <small>(mickey@mou.se)</small>:</label>
<input type="text" name="email" id="email" />
</p>
<p>
<label for="password" class="block"><h3>Password</h3></label>
<input type="password" name="password" id="password" size="20"/>
</p>
<p>
<label for="birthday" class="block"><h3>Day of birth </h3></label>
<input type="text" name="birthday" id="birthday" /><small>(dd-mm-yyyy)</small>
</p>
<p>
<label for="Phone" class="block"><h3>Phone </h3></label>
<input type="text" name="Phone" id="Phone" maxlength="10" />
</p>
<p>
<label class="block"><h3>I am:</h3></label>
<input type="radio" name="gender" id="man" value="man" /> <label for="man">Male</label>
<input type="radio" name="gender" id="woman" value="woman" /> <label for="woman">Female</label>
</p>
<h3>Address</h3>
<p>
<label for="about" class="block"></label>
<textarea id="about" cols="30" rows="5"></textarea>
</p>
<p>
<label for="category" class="block"><h3>Status </h3></label>
<select name="category" id="category" /><option> </option><option>Active</option><option>In-Active</option></select>
</p>
<p>
<label for="type" class="block"><h3>Type </h3></label>
<select name="type" id="type" /><option> </option><option>Administrator</option><option>Sub-Administrator</option></select>
</p>
<p>
<label class="block">Please agree:</label>
<input type="checkbox" name="agree" id="ship" /> <label for="ship"></label>
</p>
</fieldset>
<p>
<button type="submit" id="send">submit</button>
</p>
</form>
</div>
</body>
</html>
--------------------------------------javasc.js is :
$(document).ready(function(){
var jVal = {
'fullName' : function() {
$('body').append('<div id="nameInfo" class="info"></div>');
var nameInfo = $('#nameInfo');
var ele = $('#fullname');
var pos = ele.offset();
nameInfo.css({
top: pos.top-3,
left: pos.left+ele.width()+15
});
var patt = /^[A-Za-z]+$/;
if(!patt.test(ele.val())) {
jVal.errors = true;
nameInfo.removeClass('correct').addClass('error').html('Enter Your Name ').show();
ele.removeClass('normal').addClass('wrong');
} else {
nameInfo.removeClass('error').addClass('correct').html('√').show();
ele.removeClass('wrong').addClass('normal');
}
},
//-----------------------name validationend-------------------------------------------------------------------->
'birthDate' : function (){
$('body').append('<div id="birthInfo" class="info"></div>');
var birthInfo = $('#birthInfo');
var ele = $('#birthday');
var pos = ele.offset();
birthInfo.css({
top: pos.top-3,
left: pos.left+ele.width()+15
});
var patt = /^[0-9]{2}\-[0-9]{2}\-[0-9]{4}$/i;
if(!patt.test(ele.val())) {
jVal.errors = true;
birthInfo.removeClass('correct').addClass('error').html(' type in date in correct format').show();
ele.removeClass('normal').addClass('wrong');
} else {
birthInfo.removeClass('error').addClass('correct').html('√').show();
ele.removeClass('wrong').addClass('normal');
}
},
//-----------------------date validation-------------------------------------------------------------------->
'gender' : function (){
$('body').append('<div id="genderInfo" class="info"></div>');
var genderInfo = $('#genderInfo');
var ele = $('#woman');
var pos = ele.offset();
genderInfo.css({
top: pos.top-10,
left: pos.left+ele.width()+60
});
if($('input[name="gender"]:checked').length === 0) {
jVal.errors = true;
genderInfo.removeClass('correct').addClass('error').html('Enter Your Gender').show();//html('← are you a man or a woman?').show();
ele.removeClass('normal').addClass('wrong');
} else {
genderInfo.removeClass('error').addClass('correct').html('√').show();
ele.removeClass('wrong').addClass('normal');
}
},
//-----------------------gender validation end-------------------------------------------------------------------->
'agree' : function (){
$('body').append('<div id="agreeInfo" class="info"></div>');
var agreeInfo = $('#agreeInfo');
var ele = $('#ship');
var pos = ele.offset();
agreeInfo.css({
top: pos.top-10,
left: pos.left+ele.width()+40
});
if($('input[name="agree"]:checked').length <1) {
jVal.errors = true;
agreeInfo.removeClass('correct').addClass('error').html('Please agree the Policy ').show();
ele.removeClass('normal').addClass('wrong');
} else {
agreeInfo.removeClass('error').addClass('correct').html('√').show();
ele.removeClass('wrong').addClass('normal');
}
},
//-----------------------agree validationend-------------------------------------------------------------------->
'email' : function() {
$('body').append('<div id="emailInfo" class="info"></div>');
var emailInfo = $('#emailInfo');
var ele = $('#email');
var pos = ele.offset();
emailInfo.css({
top: pos.top-3,
left: pos.left+ele.width()+15
});
var patt = /^.+@.+[.].{2,}$/i;
if(!patt.test(ele.val())) {
jVal.errors = true;
emailInfo.removeClass('correct').addClass('error').html(' give me a valid email adress').show();
ele.removeClass('normal').addClass('wrong');
} else {
emailInfo.removeClass('error').addClass('correct').html('√').show();
ele.removeClass('wrong').addClass('normal');
}
},
//-----------------------email validationend-------------------------------------------------------------------->
'password' : function() {
$('body').append('<div id="passwordInfo" class="info"></div>');
var passwordInfo = $('#passwordInfo');
var ele = $('#password');
var pos = ele.offset();
passwordInfo.css({
top: pos.top-3,
left: pos.left+ele.width()+15
});
if(ele.val().length < 4) {
jVal.errors = true;
passwordInfo.removeClass('correct').addClass('error').html('Password length atleast 4').show();
ele.removeClass('normal').addClass('wrong');
} else {
passwordInfo.removeClass('error').addClass('correct').html('√').show();
ele.removeClass('wrong').addClass('normal');
}
},
//----------------------password validationend-------------------------------------------------------------------->
'about' : function() {
$('body').append('<div id="aboutInfo" class="info"></div>');
var aboutInfo = $('#aboutInfo');
var ele = $('#about');
var pos = ele.offset();
aboutInfo.css({
top: pos.top-3,
left: pos.left+ele.width()+15
});
if(ele.val().length < 5) {
jVal.errors = true;
aboutInfo.removeClass('correct').addClass('error').html('Enter Address Details').show();
ele.removeClass('normal').addClass('wrong').css({'font-weight': 'normal'});
} else {
aboutInfo.removeClass('error').addClass('correct').html('√').show();
ele.removeClass('wrong').addClass('normal');
}
},
//-----------------------address validation end-------------------------------------------------------------------->
'Phone' : function() {
$('body').append('<div id="PhoneInfo" class="info"></div>');
var PhoneInfo = $('#PhoneInfo');
var ele = $('#Phone');
var pos = ele.offset();
PhoneInfo.css({
top: pos.top-3,
left: pos.left+ele.width()+15
});
if(ele.val().length < 10) {
jVal.errors = true;
PhoneInfo.removeClass('correct').addClass('error').html(' at least 10 characters').show();
ele.removeClass('normal').addClass('wrong');
} else {
PhoneInfo.removeClass('error').addClass('correct').html('√').show();
ele.removeClass('wrong').addClass('normal');
}
},
//-----------------------phone validation end-------------------------------------------------------------------->
'category' : function() {
$('body').append('<div id="categoryInfo" class="info"></div>');
var categoryInfo = $('#categoryInfo');
var ele = $('#category');
var pos = ele.offset();
categoryInfo.css({
top: pos.top-3,
left: pos.left+ele.width()+15
});
if(ele.val().length <1) {
jVal.errors = true;
categoryInfo.removeClass('correct').addClass('error').html('select your Status').show();
ele.removeClass('normal').addClass('wrong');
} else {
categoryInfo.removeClass('error').addClass('correct').html('√').show();
ele.removeClass('wrong').addClass('normal');
}
},
//-----------------------Category validation end-------------------------------------------------------------------->
'type' : function() {
$('body').append('<div id="typeInfo" class="info"></div>');
var typeInfo = $('#typeInfo');
var ele = $('#type');
var pos = ele.offset();
typeInfo.css({
top: pos.top-3,
left: pos.left+ele.width()+15
});
if(ele.val().length <1) {
jVal.errors = true;
typeInfo.removeClass('correct').addClass('error').html('Select Your Type').show();
ele.removeClass('normal').addClass('wrong');
} else {
typeInfo.removeClass('error').addClass('correct').html('√').show();
ele.removeClass('wrong').addClass('normal');
}
},
//-----------------------type validationend-------------------------------------------------------------------->
'sendIt' : function (){
if(!jVal.errors) {
$('#jform').submit();
}
}
};
$('#send').click(function (){
var obj = $.browser.webkit ? $('body') : $('html');
obj.animate({ scrollTop: $('#jform') }, function (){
jVal.errors = false;
jVal.fullName();
jVal.email();
jVal.password();
jVal.birthDate();
jVal.Phone();
jVal.gender();
jVal.category();
jVal.agree();
jVal.type();
jVal.about();
jVal.sendIt();
});
return false;
});
$('#fullname').change(jVal.fullName);
$('#birthday').change(jVal.birthDate);
$('input[name="gender"]').change(jVal.gender);
$('input[name="agree"]').change(jVal.agree);
$('#email').change(jVal.email);
$('#password').change(jVal.password);
$('#Phone').change(jVal.Phone);
$('#about').change(jVal.about);
$('#type').change(jVal.type);
$('#category').change(jVal.category);
});
//-----------------------Script validationend-------------------------------------------------------------------->
Before you post, read our: 
Help with Javascript validation
