Dynamic validation of input with prototype

Context: You're stuck with prototype and you have a client that wants to validate some input with javascript. My case was "if a value exists then validate that it doesn't change by more than 20% - we want it highlighted it when you tab out". Aparently server side validation wasn't wanted, just a visual prompt.

Anyway - since my googlefu isn't up to scratch for mooching good javascript solutions that other people did I coded it myself (shocking!). Hopefully this helps someone. If not go switch to jQuery - seriously...

Back on topic again, wn load this creates a handler for each input that you find with your selector. The handler is a closure that uses the input's current value for relative validation, ie if the value was 1.0 when the form loaded then it would add the 'warning' class to the input if it was more than 1.2 or less than 0.8 after it's changed.

If you want more heavy handed validation (and you likely will) you can do harsher things like refusing to submit the form (good) or redirecting them to failblog (even gooder).

	document.observe("dom:loaded", function() {
	$$(".things_you_want_to_validate").each(function(item) {
	if(item.value) {
	var x = parseFloat(item.value);
	var handler = function(event) {
	var element = Event.element(event);
	var old_val = x;
	var new_val = parseFloat(element.value);
	if (isNaN(new_val) || new_val > (old_val * 1.2) || new_val < (old_val * .8)) {
	element.addClassName('warning');
	} else {
	element.removeClassName('warning');
	}
	};
	item.observe('blur', handler);
	}
	});
	});

view raw validations.js hosted with ❤ by GitHub

*What the hell is with Event.element(event) - if anyone knows a nicer way of doing this please let me know...