<style>
<!--
label,input {
display: block;
width: 150px;
float: left;
margin-bottom: 10px;
}
label {
text-align: right;
width: 75px;
padding-right: 20px;
}
p {
clear: left;
margin: 0;
margin-bottom: 10px;
}
span.error {
display: block;
float: left;
margin-left: 20px;
color: #cc0000;
font-weight: 600;
}
input.error {
border: 1px solid #cc0000;
background-color: #ffffff;
}
-->
</style>
<script>
var W3CDOM = (document.getElementsByTagName && document.createElement);
/***
window.onload = function () {
document.forms[0].onsubmit = function () {
return validate()
}
}
***/
function validate()
{
validForm = true;
errorstring = '';
var x = document.forms[0].elements;
for (var i=0;i<x.length;i++)
{
if (!x[i].value)
writeError(x[i],'This field is required');
}
if (x['email'].value.indexOf('@') == -1)
writeError(x['email'],'This is not a valid email address');
if (!W3CDOM)
alert(errorstring);
if (firstError)
firstError.focus();
return validForm;
}
function writeError(obj,message)
{
if (obj.hasError) return;
if (W3CDOM)
{
obj.className += ' error';
obj.onchange = removeError;
var sp = document.createElement('span');
sp.className = 'error';
sp.appendChild(document.createTextNode(message));
obj.parentNode.appendChild(sp);
obj.hasError = sp;
}
else
{
errorstring += obj.name + ': ' + message + '\n';
obj.hasError = true;
}
if (validForm)
firstError = obj;
validForm = false;
}
function removeError()
{
this.className = this.className.substring(0,this.className.lastIndexOf(' '));
this.parentNode.removeChild(this.hasError);
this.hasError = null;
this.onchange = null;
}
</script>
http://www.quirksmode.org/dom/error.html
<BR>
<form name="example" method=post onSubmit="return
validate();">
<p><label for="name">name</label>
<input size=20 name="name" id="name"></p>
<p><label for="address">address</label>
<input size=20 name="address" id="address"></p>
<p><label for="city">city</label>
<input size=20 name="city" id="city"></p>
<p><label for="email">e-mail</label>
<input size=20 name="email" id="email"></p>
<p><input type=submit value="Submit form"></p>
</form>
|