Page is a not externally linkable
Fotiman - 7:12 pm on Oct 8, 2008 (gmt 0)
This example demonstrates: Hope this is helpful. At the very least, it was quick and fun. :)
I took a quick stab at how I might do it, using JavaScript to define the fields to validate vs. putting it in the code. Note, this is a crude example, meant only as a proof of concept. In this example, I'm defining event handlers, whereas in a real world case you'd be better off using event listeners. Also, I'd move the JavaScript out to .js files.
1. Your markup remains clean.
2. A class 'DaValidator', which can take the configuration data in the constructor or in an init method call. Public methods defined in the prototype object for memory efficiency.
3. Multiple instances of the validator. One demonstrates passing the config in the constructor, the other demonstrates passing it in the init method.
4. A callback method when the validator fails (useful for capturing the fields that errored and showing that to the user).
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" >
<title>Sample DaValidator</title>
</head>
<body>
<form action="" id="userForm">
<div>
First Name: <input id="firstname" name="firstname">
Price: <input id="price" name="price">
<input type="submit" value="submit">
</div>
</form>
<form action="" id="contactForm">
<div>
Phone: <input id="phonenum" name="phonenum">
Email: <input id="email" name="email">
<input type="submit" value="submit">
</div>
</form>
<!-- Scripts -->
<script type="text/javascript">
function DaValidator(oCfg) {
this.cfg = oCfg ¦¦ {};
}
DaValidator.prototype = {
init: function (oCfg) {
// Valid config object properties:
// items {Array} ...
// ...
this.cfg = oCfg;
},
validate: function (fn) {
var i, o, result = true;
var el, aStatus = [];
if (!this.cfg ¦¦ !this.cfg.items) {
// No items to validate
return result;
}
o = this.cfg.items;
for (i = 0; i < o.length; i++) {
el = document.getElementById(o[i].id);
// Check each of the possible validation properties
if (o[i].req) {
if (el.value.length == 0) {
result = false;
aStatus[aStatus.length] = {id:o[i].id, msg:'Missing required value on ' + o[i].id};
}
}
// if (o[i].type) {...}
// if (o[i].allow) {...}
// etc.
}
// fire the callback method
if (fn) {
fn.call(this,aStatus);
}
return result;
}
};
</script>
<script type="text/javascript">
window.onload = function () {
var V = new DaValidator();
V.init({
items: [
{id:'firstname', req:true, type:'letters', allow:'spaces'},
{id:'price', req:true, type:'email'}
]
});
var V2 = new DaValidator({
items: [
{id:'phonenum', req:true},
{id:'email', req:true}
]
});
function validatorCallBack (a) {
var i, str = '';
// We have the scope of the DaValidator instance, so we can
// access properties of the DaValidator instance using 'this'
if (this.cfg && this.cfg.items) {
alert('Number of items checked: ' + this.cfg.items.length);
}
for (i = 0; i < a.length; i++) {
str += a[i].msg + '\n';
}
alert(str);
}
document.getElementById('userForm').onsubmit = function () {
return V.validate(validatorCallBack);
};
document.getElementById('contactForm').onsubmit = function () {
return V2.validate(validatorCallBack);
};
};
</script>
</body>
</html>