<!-- Copy this code and save "file.html" and use it -->
<html>
<font face="Arial,Helvetica,Geneva,Swiss,SunSans-Regular">
<head>
<!--start head-->
<title>CSS Form Validation</title>
<style type="text/css">
.error {
color: #FF0000;
}
span {
font-weight: bold;
}
</style>
<SCRIPT language=JavaScript>
<!--
//Any fields that are left empty, or are not properly filled in, will be highlighted in red. //Fields that are filled in correctly will be properly formatted.
function validate() {
if (!document.getElementById)
return;
// get form variables
var title = document.getElementById("title").value;
var firstname = document.getElementById("firstname").value;
var lastname = document.getElementById("lastname").value;
var address1 = document.getElementById("address1").value;
var address2 = document.getElementById("address2").value;
var city = document.getElementById("city").value;
var state = document.getElementById("state").value;
var zipcode = document.getElementById("zipcode").value;
var phone = document.getElementById("phone").value;
var fax = document.getElementById("fax").value;
var incorrect = new Array();
var no = 0;
var regExp = /[A-Za-z]{2,6}/;
if (regExp.test(title)) {
title = title.charAt(0).toUpperCase()
+ title.substring(1, title.length).toLowerCase();
} else {
incorrect[no] = "1";
no++;
title = "";
}
regExp = /[A-Za-z]{1,}/;
if (regExp.test(firstname)) {
firstname = firstname.toUpperCase();
} else {
incorrect[no] = "2";
no++;
firstname = "";
}
regExp = /[A-Za-z]{3,}-?[A-Za-z]?/;
if (regExp.test(lastname)) {
lastname = lastname.charAt(0).toUpperCase()
+ lastname.substring(1, lastname.length).toLowerCase();
} else {
incorrect[no] = "3";
no++;
lastname = "";
}
if (address1.length < 5) {
incorrect[no] = "4";
no++;
address1 = "";
}
if (address2.length < 3) {
incorrect[no] = "5";
no++;
address2 = "";
}
if (city.length < 3) {
incorrect[no] = "6";
no++;
city = "";
}
if (state.length < 5) {
incorrect[no] = "7";
no++;
state = "";
}
if (zipcode.length < 5) {
incorrect[no] = "8";
no++;
zipcode = "";
}
if (phone.length < 7) {
incorrect[no] = "9";
no++;
phone = "";
}
if (fax.length < 7) {
incorrect[no] = "8";
no++;
fax = "";
}
for (i = 1; i < 11; i++) {
document.getElementById(i).style.color = "#000000";
}
for (j = 0; j < no; j++) {
document.getElementById(incorrect[j]).style.color = "#FF0000";
}
if (no > 0) {
document.getElementById("errors").innerHTML = "<span class=\"error\">There was an error with your form submission. Please fill in the necessary fields.</span><br />";
}
document.getElementById("title").value = title;
document.getElementById("firstname").value = firstname;
document.getElementById("lastname").value = lastname;
document.getElementById("address1").value = address1;
document.getElementById("address2").value = address2;
document.getElementById("city").value = city;
document.getElementById("state").value = state;
document.getElementById("zipcode").value = zipcode;
document.getElementById("phone").value = phone;
document.getElementById("fax").value = fax;
}
//-->
</SCRIPT>
<script language=JavaScript>
function upperCase(id)
{
id.value = id.value.toUpperCase();
}
</script>
<!--end head-->
</head>
<body bgcolor="#FFFFFF" text="#000000" link="#0000FF" vlink="#0000FF"alink="#FF0000">
<font size="2" color="#000000" face="Arial">
<div align="center">
</style>
</div>
</td>
<td valign="middle">
<div align="right">
<!-- AddThis Button BEGIN -->
<script type="text/javascript">
var addthis_pub = 'gloryless';
</script>
<!-- AddThis Button END -->
</div>
</td>
</tr>
</table>
</div>
<table width="950" border="0" cellpadding="5" cellspacing="0">
<tr valign="top">
<td colspan="2"><div align="center">
<script type="text/javascript">
</script>
</div>
</td>
</tr>
<tr valign="top">
<td width="10%" bgcolor="#c5c3c4" align="left">
<table border="0" width=122>
<br />
</td>
<td><center>
<br />
<br />
<div align="center">
<div id="details" align="center">
<div id="errors"></div>
<form action="" method="post">
<table border="0" cellpadding="4" cellspacing="0">
<tr>
<td align="right"><span id="1">Title </span>
</td>
<td><input name="id" id="title" onkeyup="upperCase(this)" type="text" size="25"
maxlength="6"
></td>
</tr>
<tr>
<td align="right"><span id="2">First Name </span>
</td>
<td><input name="firstname" id="firstname"
type="text" size="25" maxlength="30"
onkeyup="upperCase(this)" ></td>
</tr>
<tr>
<td align="right"><span id="3">Last Name </span>
</td>
<td><input name="lastname" onkeyup="upperCase(this)" id="lastname" type="text"
size="25"
></td>
</tr>
<tr>
<td align="right"><span id="4">Address 1 </span>
</td>
<td><input name="address1" onkeyup="upperCase(this)" id="address1" type="text"
size="25"
></td>
</tr>
<tr>
<td align="right"><span id="5">Address 2 </span>
</td>
<td><input name="address2" onkeyup="upperCase(this)" id="address2" type="text"
size="25"
></td>
</tr>
<tr>
<td align="right"><span id="6">City </span>
</td>
<td><input name="city" onkeyup="upperCase(this)" id="city" type="text"
size="25"
></td>
</tr>
<tr>
<td align="right"><span id="7">State </span>
</td>
<td><input name="state" id="state" type="text"
size="25"></td>
</tr>
<tr>
<td align="right"><span id="8">Zip Code </span>
</td>
<td><input name="zipcode" id="zipcode" type="text"
size="25" maxlength="8"
></td>
</tr>
<tr>
<td align="right"><span id="9">Phone Number </span>
</td>
<td><input name="phone" id="phone" type="text"
size="25" maxlength="14"
></td>
</tr>
<tr>
<td align="right"><span id="10">Fax Number </span>
</td>
<td><input name="fax" id="fax" type="text" size="25"
maxlength="14"
></td>
</tr>
</table>
<input type="button" value="Submit" onClick="validate();">
</form>
</div>
<br />
<!-- google_ad_section_start(weight=ignore) -->
<FONT Size="1"> </FONT>
</td>
<div align="center">
</noscript>
<!-- End Quantcast tag -->
<br />
<br />
</div>
</td>
</tr>
</table>
</font>
</div>
</font>
</body>
</html>
No comments:
Post a Comment