Form Validation with js and css (Php,html, .asp)
Form Validation with js and css
To make it all work, we first need to add the jQuery library script between the Head tags.
* when you blank field then focus text box (etc) border red and open alert box
* when you focus text box etc then text box and etc background change.
Code Here
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<title>Create User</title>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″ />
<script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js” language=”javascript”></script>
<script src=”js/jquery.alerts.js” type=”text/javascript”></script>
<link href=”css/jquery.alerts.css” rel=”stylesheet” type=”text/css” media=”screen” />
<style>
.form label span { font-size:12px; color: #888; margin-left: 10px; }
.form .dropdown {background: #fff; border: 1px solid #ddd; width: 96%; padding: 4px; font-size: 18px; }
.meta_form .dropdown {background: #fff; padding: 3px 4px 1px 0; border: 1px solid #ddd; font-size: 12px;
margin-left: 0px;width: 96%; }
.form .text {width: 96%; padding: 4px; font-size: 18px; background: #fff; border: 1px solid #ddd; }
.form textarea {width: 96%; padding: 4px; height: 160px; font:15px/20px Arial, serif; background: #fff; border: 1px solid #ddd;}
.form textarea:focus, .text:focus, .dropdown:focus{ background: #fff8ee; border: 1px solid #ccc;}
.form textarea, .form .text, .form .dropdown {-moz-box-shadow: 1px 2px 3px #e5e5e5;
box-shadow: 1px 2px 3px #e5e5e5;-webkit-box-shadow: 1px 2px 3px #e5e5e5; }
.form .submit {font-size: 14px; color: #fff; font-weight: bold; background:#121212 url(../img/menu_bg.gif) bottom right repeat-y;border: 3px solid #888; -moz-border-radius: 4px; -webkit-border-radius: 4px; margin: 0 0 0 32px;vertical-align: bottom; padding: 7px 12px; }
</style>
<script type=”text/javascript”>
function validateForm() {
if (document.forms.form.name.value==””) {
jAlert(“Please fill in the name.”,”Message”);
$(“#form-name”).css(“border”, “solid red 3px”);
return false;
} else if (document.forms.form.email.value==””) {
$(“#form-name”).css(“border”, “solid #eee 3px”);
jAlert(“Please fill in the email.”,”Message”);
$(“#form-email”).css(“border”, “solid red 3px”);
return false;
} else if (document.forms.form.pass.value==””) {
$(“#form-name”).css(“border”, “solid #eee 3px”);
$(“#form-email”).css(“border”, “solid #eee 3px”);
jAlert(“Please fill in a password.”,”Message”);
$(“#form-pass”).css(“border”, “solid red 3px”);
return false;
}
}
</script>
</head>
<body>
<h2>Create User</h2>
<form action=”” method=”post” class=”form” name=”form” onsubmit=”return validateForm()”>
<head>
<title>Create User</title>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″ />
<script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js” language=”javascript”></script>
<script src=”js/jquery.alerts.js” type=”text/javascript”></script>
<link href=”css/jquery.alerts.css” rel=”stylesheet” type=”text/css” media=”screen” />
<style>
.form label span { font-size:12px; color: #888; margin-left: 10px; }
.form .dropdown {background: #fff; border: 1px solid #ddd; width: 96%; padding: 4px; font-size: 18px; }
.meta_form .dropdown {background: #fff; padding: 3px 4px 1px 0; border: 1px solid #ddd; font-size: 12px;
margin-left: 0px;width: 96%; }
.form .text {width: 96%; padding: 4px; font-size: 18px; background: #fff; border: 1px solid #ddd; }
.form textarea {width: 96%; padding: 4px; height: 160px; font:15px/20px Arial, serif; background: #fff; border: 1px solid #ddd;}
.form textarea:focus, .text:focus, .dropdown:focus{ background: #fff8ee; border: 1px solid #ccc;}
.form textarea, .form .text, .form .dropdown {-moz-box-shadow: 1px 2px 3px #e5e5e5;
box-shadow: 1px 2px 3px #e5e5e5;-webkit-box-shadow: 1px 2px 3px #e5e5e5; }
.form .submit {font-size: 14px; color: #fff; font-weight: bold; background:#121212 url(../img/menu_bg.gif) bottom right repeat-y;border: 3px solid #888; -moz-border-radius: 4px; -webkit-border-radius: 4px; margin: 0 0 0 32px;vertical-align: bottom; padding: 7px 12px; }
</style>
<script type=”text/javascript”>
function validateForm() {
if (document.forms.form.name.value==””) {
jAlert(“Please fill in the name.”,”Message”);
$(“#form-name”).css(“border”, “solid red 3px”);
return false;
} else if (document.forms.form.email.value==””) {
$(“#form-name”).css(“border”, “solid #eee 3px”);
jAlert(“Please fill in the email.”,”Message”);
$(“#form-email”).css(“border”, “solid red 3px”);
return false;
} else if (document.forms.form.pass.value==””) {
$(“#form-name”).css(“border”, “solid #eee 3px”);
$(“#form-email”).css(“border”, “solid #eee 3px”);
jAlert(“Please fill in a password.”,”Message”);
$(“#form-pass”).css(“border”, “solid red 3px”);
return false;
}
}
</script>
</head>
<body>
<h2>Create User</h2>
<form action=”” method=”post” class=”form” name=”form” onsubmit=”return validateForm()”>
<label>First and Last Name</label>
<input type=”text” name=”name” class=”text” id=”form-name” />
<label>Email</label>
<input type=”text” name=”email” class=”text” id=”form-email” />
<label>Password</label>
<input type=”password” name=”pass” class=”text” id=”form-pass” /><br />
<label>Text Area</label>
<textarea rows=”5″ cols=”5″></textarea><br />
<label>Select Box</label>
<select id=”test” class=”dropdown” name=”test”>
<option>1</option>
<option>2</option>
<option>3</option>
</select>
<input type=”submit” value=”Create User” name=”submit” class=”submit” /><br />
</form>
</body>
</html>
