Belfry Images

I’ve written a very simple plugin for jQuery that takes a template and a model and returns a view of the model. To make sure it worked I wrote some tests and examples, and since I did that I figured I would write a little mini-site. The plugin itself is pretty straightforward:

(function($){
	$.fn.cliche = function(model){
		var template = $(this).html();
		template = template.replace(/%7C/g, '|');	// pipes in a href like <a href="|... get converted to %7C, convert it back
		template = template.replace(/\|.*?\|/g, function(f) {
			var val = model;
			var fieldParts = f.replace(/\|/g, '').split('.');
			for (var i = 0; i < fieldParts.length; i ++) {
				val = val[fieldParts[i]];
			}
			return val;
		});
		return template;
	};
}(jQuery));

It is used by setting up a template (putting it into a script type="text/html" block is convenient and hides it from display) and calling cliche(model) on the jQuery object:

<div id="output">
	<ul></ul>
</div>
<script type="text/html" id="testTemplate">
	<li id="item|id|"><a href="viewItem?id=|id|">|name|</a></li>
</script>
<script type="text/javascript">
	$('#output ul').append(
		$('#testTemplate').cliche({
			id: 1, name: 'Lorem'
		})
	);
</script>

Cliche is licensed under a Creative Commons Attribution 2.5 Australia license. Check it out at http://cliche.belfryimages.com.au.

I’ve just made a new tool live, it is a sandbox for playing with simple regular expressions in Javascript. I’ve used a couple of other web-based regex tools, what makes this one different is the result of the regular expression is shown live (as well as a couple of examples of what the regex should look like in code). Try out the RegEx Sandbox at regex.belfryimages.com.au.

Every time I’ve implemented client-side form validation I’ve started from scratch and done it a little differently. Usually it devolves into a messy set of if statements and duplicated code. Here’s my latest method, which separates the validation rules from the processing. It uses jQuery because if you’re not using a Javascript library you should be. This will only handle relatively simple validation cases.

So start with a form:

	<form id="mailingListSubscription" action="subscribe.php">
		Name: <input type="text" name="name" id="name" /><br />
		Email: <input type="text" name="email" id="email" /><br />
		Phone: <input type="text" name="phone" id="phone" /><br />
		<button type="submit">Subscribe</button>
	</form>

All fields are required, and I’m going to use some magical regex (found on the interthingy somewhere) to validate the email address. This script sets up the rules:

	var rules = [
		{ id: 'name', test: function(val) { return val != ''; }, msg: 'Please enter your name' },
		{ id: 'email', test: function(val) { return val.search(/^[^@]+@[^@]+.[a-z]{2,}$/i) != -1; }, msg: 'Please enter a valid email address' },
		{ id: 'phone', test: function(val) { return val != ''; }, msg: 'Please enter your phone number' }
	];

Each rule has the id of the form element being tested, a message that gets displayed on failing the rule, and a function that validates the value of the form element. I also could add multiple rules for the one input.

This script sets up the submit handler for the form, which does the validation using the array of rules set up above:

	$(function(){
		$('form#mailingListSubscription').submit(function(){
			for (var i = 0; i < rules.length; i ++) {
				var rule = rules[i];
				var target = $('#'+rule.id);
				if (!rule.test(target.val())) {
					alert(rule.msg);
					target.focus();
					return false;
				}
			}
			return true;
		});
	});

On a test failing, the rule’s msg value is shown and the target of the test gets focus. This could be changed to something more user friendly like showing the message next to the target field.