Menu
I’ve been trying to understand this tutorial I found – but it has no comments and the explanation doesn’t go beyond what each function does. I follow it reasonably until it gets to the DOM manipulation. If anyone who understands this thing would want to comment it – that would be cool….
[CODE]<html>
<head>
<title>Live forms</title>
<script type=”text/javascript” src=”js/utils.js”></script>
<script type=”text/javascript” src=”js/Validator.js”></script>
<style type=”text/css”>
body
{
font-family: Helvetica, Arial, Verdana, Sans-Serif;
font-size: 12px;
color: #666;
}
input, select
{
width: 90%;
font-size: 14px;
padding: 4px;
}
fieldset
{
border: 1px dotted #ccc;
width: 250px;
}
</style>
</head>
<body onload=”Validator.Initialize(‘liveForm’, 6, ‘submit’, ‘img/check.gif’, ‘img/x.gif’);”>
<form id=”liveForm” action=”” method=”post” onsubmit=”if(!Validator.AllFieldsValidated()) return false;”>
<fieldset>
<div style=”float: right;”>* = required field</div>
<legend>Live form</legend>
<p>Your first name: * <br/><input type=”text” id=”firstName” name=”firstName” onblur=”Validator.Validate(this);” /></p>
<p>Your last name: * <br/><input type=”text” id=”lastName” name=”lastName” onblur=”Validator.Validate(this);” /></p>
<p>Your email: * <br/><input type=”text” id=”email” name=”email” onblur=”Validator.Validate(this, ’email’);” /></p>
<p>Company: <br/><input type=”text” name=”company” /></p>
<p>Street address: * <br/><input type=”text” id=”street” name=”street” onblur=”Validator.Validate(this);” /></p>
<p>State: *
<br/><select id=”state” name=”state” onchange=”Validator.Validate(this);” onblur=”Validator.Validate(this);”>
<option value=”” selected=”true”></option>
<option value=”AK”>AK</option>
<option value=”AL”>AL</option>
<option value=”AR”>AR</option>
<option value=”AZ”>AZ</option>
<option value=”CA”>CA</option>
<option value=”CO”>CO</option>
<option value=”CT”>CT</option>
<option value=”DC”>DC</option>
<option value=”DE”>DE</option>
<option value=”FL”>FL</option>
<option value=”GA”>GA</option>
<option value=”HI”>HI</option>
<option value=”IA”>IA</option>
<option value=”ID”>ID</option>
<option value=”IL”>IL</option>
<option value=”IN”>IN</option>
<option value=”KS”>KS</option>
<option value=”KY”>KY</option>
<option value=”LA”>LA</option>
<option value=”MA”>MA</option>
<option value=”MD”>MD</option>
<option value=”ME”>ME</option>
<option value=”MI”>MI</option>
<option value=”MN”>MN</option>
<option value=”MO”>MO</option>
<option value=”MS”>MS</option>
<option value=”MT”>MT</option>
<option value=”NC”>NC</option>
<option value=”ND”>ND</option>
<option value=”NE”>NE</option>
<option value=”NH”>NH</option>
<option value=”NJ”>NJ</option>
<option value=”NM”>NM</option>
<option value=”NV”>NV</option>
<option value=”NY”>NY</option>
<option value=”OH”>OH</option>
<option value=”OK”>OK</option>
<option value=”OR”>OR</option>
<option value=”PA”>PA</option>
<option value=”RI”>RI</option>
<option value=”SC”>SC</option>
<option value=”SD”>SD</option>
<option value=”TN”>TN</option>
<option value=”TX”>TX</option>
<option value=”UT”>UT</option>
<option value=”VA”>VA</option>
<option value=”VT”>VT</option>
<option value=”WA”>WA</option>
<option value=”WI”>WI</option>
<option value=”WV”>WV</option>
<option value=”WY”>WY</option>
<option value=”Other”>Other</option>
</select>
</p>
<p>Zip code: * <br/>
<input type=”text” id=”zip” name=”zip” maxlength=”5″ onblur=”Validator.Validate(this);” />
</p>
</fieldset>
</br>
<div id=”innerFieldset”>
<noscript>
<input id=”submit” type=”submit” value=”Register” class=”action” />
</noscript>
</div>
<script type=”text/javascript”>
gebid(‘innerFieldset’).innerHTML = ‘<input id=”submit” type=”submit” value=”Register” style=”width: 100px;” disabled=”true” />’;
</script>
</form>
</body>
</html>
[CODE]function gebid(i)
{
try
{
return document.getElementById(i);
}
catch(err)
{
return null;
}
}
function ce(e, obj)
{
var a = document.createElement(e);
for(prop in obj)
{
a[prop] = obj[prop];
}
return a;
}
function ac()
{
if(ac.arguments.length > 1)
{
var a = ac.arguments[0];
for(i=1; i<ac.arguments.length; i++)
{
if(arguments[i])
{
a.appendChild(ac.arguments[i]);
}
}
return a;
}
else
{
return null;
}
}
function rc(node)
{
if(node != null)
{
try
{
node.parentNode.removeChild(node);
}
catch(err)
{
// no node
}
}
}
function InsertAfter(parent, node, referenceNode)
{
parent.insertBefore(node, referenceNode.nextSibling);
}
[CODE]var Validator = new Object();
Validator.Initialize = function(formId, fieldNum, submitId, validImage, invalidImage)
{
Validator.currentSelector = ”;
Validator.currentForm = formId;
gebid(Validator.currentForm).reset();
Validator.fieldNumValidated = 0;
Validator.fieldNumToValidate = fieldNum;
Validator.submitId = submitId;
Validator.validImage = validImage;
Validator.invalidImage = invalidImage;
}
Validator.Validate = function(selector, inputType)
{
this.currentSelector = selector;
this.preload(selector);
var isEmpty = true;
switch(selector.type)
{
case ‘undefined’: break;
case ‘radio’:
for(var x=0; x < selector.length; x++)
{
if(selector[x].checked == true)
{
isEmpty = false;
}
}
break;
case ‘select-multiple’:
for(var x=0; x < selector.length; x++)
{
if(selector[x].selected == true)
{
isEmpty = false;
}
}
break;
case ‘checkbox’:
if(selector.checked)
{
isEmpty = false;
}
break;
default:
if(selector.value)
{
// safari 3.0 = 1024
// IE 7.0 = 2147483647
if(selector.maxLength > 0 && !(selector.maxLength == 1024) && !(selector.maxLength == 2147483647))
{
if(selector.value.length == selector.maxLength)
{
isEmpty = false;
}
}
else
{
isEmpty = false;
}
}
switch(inputType)
{
case ’email’:
this.validateEmail();
return;
}
}
if(isEmpty) this.invalid();
else this.valid();
}
Validator.validateEmail = function()
{
var str = this.currentSelector.value;
var at=”@”;
var dot=”.”;
var lat=str.indexOf(at);
var lstr=str.length;
var ldot=str.indexOf(dot);
if (str.indexOf(at)==-1)
{
this.invalid();
return false;
}
if (str.indexOf(at)==-1 || str.indexOf(at)==0 || str.indexOf(at)==lstr)
{
this.invalid();
return false;
}
if (str.indexOf(dot)==-1 || str.indexOf(dot)==0 || str.indexOf(dot)==lstr)
{
this.invalid();
return false;
}
if (str.indexOf(at,(lat+1))!=-1)
{
this.invalid();
return false;
}
if (str.substring(lat-1,lat)==dot || str.substring(lat+1,lat+2)==dot)
{
this.invalid();
return false;
}
if (str.indexOf(dot,(lat+2))==-1)
{
this.invalid();
return false;
}
if (str.indexOf(” “)!=-1)
{
this.invalid();
return false;
}
this.valid();
}
Validator.valid = function()
{
rc(this.currentSelector.invalidImage);
InsertAfter(this.currentSelector.parentNode, this.currentSelector.validImage, this.currentSelector);
if(!this.currentSelector.isValid)
{
this.fieldNumValidated++;
}
if(Validator.AllFieldsValidated())
{
gebid(this.submitId).disabled = false;
}
this.currentSelector.isValid = true;
this.currentSelector.validated = true;
}
Validator.invalid = function()
{
rc(this.currentSelector.validImage);
InsertAfter(this.currentSelector.parentNode, this.currentSelector.invalidImage, this.currentSelector);
if(this.currentSelector.isValid)
{
this.fieldNumValidated–;
}
gebid(this.submitId).disabled = true;
this.currentSelector.isValid = false;
this.currentSelector.validated = true;
}
Validator.preload = function(selector)
{
if(selector)
{
Validator.currentSelector = selector;
if(!Validator.currentSelector.validImage && !Validator.currentSelector.invalidImage)
{
Validator.currentSelector.validImage = ce(‘img’, {src: Validator.validImage});
Validator.currentSelector.invalidImage = ce(‘img’, {src: Validator.invalidImage});
}
if(Validator.currentSelector.isValid == undefined)
{
Validator.currentSelector.isValid = false;
}
}
}
Validator.AllFieldsValidated = function(override)
{
if(this.fieldNumValidated >= this.fieldNumToValidate || override) return true;
else return false;
}