Matt Evanoff

I ran into an interesting problem recently dealing with some complicated form validation. The issue was that we had several forms with fields that were required or optional based on if other inputs were filled out, with the requirements falling in a specific order. I came up with an interesting solution that looks at a data-ignore-validation attribute on the current form element and, if it exists will check the form element(s) with that name to see if they are filled out, or if they have a similar data-ignore-validation attribute meaning they can possibly be ignored as well. We have a nice little recursive solution that will check all of the form elements in a chain to see if the current one can be ignored.

All we need to do is send the following function the form element to be checked as well as our form, and it will tell us if the element passed in should be ignored.

	function ignoreField(elem, form) {
		//if we have an data-ignore-validation property, we can ignore _this_ .val() if the field with the name = ignore-validation has a .val() set
		var ignoreOn = $(elem).data('ignoreValidation');
		if(ignoreOn) {
			ignoreOn = ignoreOn.split(',');
			//We use this var to hold the complete list of for elements we need to check
			var $ignoreFields = $();

			//get all of the fields this one can be ignored on
			for(var i = 0; i < ignoreOn.length; i++) {			
				$ignoreFields = $ignoreFields.add(form.find('input[name="'+ignoreOn[i]+'"], select[name="'+ignoreOn[i]+'"]'));
			}

			//(recursively) check if any of the fields in the ignoreValidation have a value set
			for(var i = 0; i < $ignoreFields.length; i++) {
				if($ignoreFields.val()) {
					return true;
				}
				return ignoreField($ignoreFields.eq(i), form);
			}
		}		
		return false;
	}

Of course we do have an issue here where an inexperienced developer could put in a circular reference and we would end up with and infinite loop, but I leave it to you to either fix that issue, or just be smart enough not to do that.

If you are not already very aware, duplicate IDs in your markup are a very bad thing. Now, technically they will work fine in CSS, and can possibly even make it faster, BUT they WILL break your javascript. Basically when you have multiple elements with the same ID what the browser will do is unpredictable.

Sometimes in some browsers you might get what you want, other times in other browsers the wrong thing will happen, sometimes nothing will happen. You never know. On many different occasions I have been helping someone with some javascript, or fixing a website for a job and things just won’t work, and eventually I find the problem to be duplicate IDs. Dealing with this problem again today, I wrote a little jQuery plugin that checks your page for duplicate IDs. It is pretty simple, and you should never actually have this on a production site, it is just something you run while you are developing so you can yell at the jackass who wrote crappy markup to make sure you aren’t doing things you shouldn’t. The full code for the plugin is this:

(function($) {
	$.dupCheck = function() {
		var ids = [], dups = [], dupCount = 0;

		//this just displays the result if there is no console
		if (!window.console) {
			var console = {
				log: function(msg) {
					$('body').append(msg);
				}
			};
		} else {
			console = window.console;
		}		
		
		$('*').each(function() {
			var id = this.id, i = 0, len = ids.length, isDup = false;
					
			if(id) {
				for(i=0 ; i < len ; i++) { //loop over the IDs we have already processed to see if the current one is a dup
					if(!isDup && id === ids[i]) { //if the ID is a dup, add it to the dups list and set our bool				
						if(checkIfAlreadyDup(id) === false) {
							dups.push(id);						
						}
						isDup = true;
						dupCount++;
						break;
					}
				}
				
				if(!isDup) { //if the ID was not a dup, add it to the list of processed IDs
					ids.push(id);
				} else {	//if the ID was not a dup, clear out our bool
					isDup = false;
				}
			}
		});
		
		if(dups.length === 0) {
			console.log('No duplicate IDs found =)');
		} else {
			console.log('' + dups.length + ' duplicate IDs found repeated ' + dupCount + ' times =(');
		}
		
		function checkIfAlreadyDup(id) {
			var len = dups.length, i = 0;
			for(i = 0; i < len; i++) {
				if(dups[i] === id) {
					return true;
				}
			}
			return false;
		}		
		
		return dups;
	}
})(jQuery);

The way to use this is to load the plugin (or even just paste the code into your javascript console) then run the function:

	var dups = $.dupCheck();

You obviously need to do this after the document is ready, and after any offending javascript/ajax calls have completed.

It will output a message telling you how may duplicate IDs you have, and it returns an array of the IDs that are duplicates. It is pretty simple, but if you are banging you head against the wall trying to figure out why your javascript is not working, just run it, and it might give you the answer.

Download: Dupcheck.js

And I have now run this on this page, apparently I have a duplicate ID! Maybe I need to just get rid of that facebook ‘like’ button.

I have updated my pub/sub plugin.  The two changes are:

It now uses the full words, publish, subscribe, and unsubscribe – this change was because with 1.5, jQuery now has a sub method which I do not want to overwrite.

Also, you can now publish and subscribe multiple tags at once using a space separated list like so:

$.publish('first/tag second/tag');

$.subscribe('first/tag second/tag', function(){/*do something*/});

This just make it more like the rest of jQuery events and such.

The new version can be downloaded here:

Live DOM sub/pub

So, I wanted to give the new CSS hooks in jQuery a try. Unfortunately, the usually well documented jQuery has this as the total documentation on the hooks:

As of version 1.4.3, jQuery’s CSS module was rewritten to provide a set of “hooks” for the .css() method. This advanced feature, $.cssHooks, allows for fine-grained control over the way jQuery handles certain style properties and enables the creation of custom, browser-normalized properties. The $.cssHooks object also extends the set of properties available to the .animate() method.

Which isn’t much to go on. So, I broke out the old source code to see whats up. Basically, you can hook into a CSS property and create setters and getters for it. I started by making a simple hook that allows you to use show and hide on the display property, and have it call show() and hide(). The code is pretty simple:

jQuery.cssHooks.display = {
	set: function(elem, value) {
		if (typeof (value) === 'string') {
			if (value === 'hide') {
				$(elem).hide();
			} else if (value === 'show') {
				$(elem).show();
			} else {
				elem.style['display'] = value;
			}
		} else {
			if (value.hide) {
				$(elem).hide(value.hide);
			} else if (value.show) {
				$(elem).show(value.show);
			} else {
				elem.style['display'] = value;
			}			
		}
	}
};

This simply checks if you are passing in a string or an object, and then calls show/hide with the supplied value (in the case of an object.) If you are not using show/hide it runs node.style[‘display’] = value; which is what normally happens when you call .css.

I made an example for it here:

Hide
Hide Slow
Hide REALLY Slow
Hide Normal

The code here is pretty simple too:

$('#hookButton').click(function(e) {
	var $this = $(this);
	if($this.text() === 'Hide') {
		$('#cssHookTest').css('display', 'hide');
		$this.text('Show');
	} else {
		$('#cssHookTest').css('display', 'show');
		$this.text('Hide');		
	}
});

$('#hookButton2').click(function(e) {
	var $this = $(this);
	if($this.text() === 'Hide Slow') {
		$('#cssHookTest').css('display', {'hide': 'slow'});
		$this.text('Show Slow');
	} else {
		$('#cssHookTest').css('display', {'show': 'slow'});
		$this.text('Hide Slow');		
	}
});	

$('#hookButton3').click(function(e) {
	var $this = $(this);
	if($this.text() === 'Hide REALLY Slow') {
		$('#cssHookTest').css('display', {'hide': 1400});
		$this.text('Show REALLY Slow');
	} else {
		$('#cssHookTest').css('display', {'show': 1400});
		$this.text('Hide REALLY Slow');		
	}
});		

$('#hookButton4').click(function(e) {
	var $this = $(this);
	if($this.text() === 'Hide Normal') {
		$('#cssHookTest').css('display', 'none');
		$this.text('Show Slow');
	} else {
		$('#cssHookTest').css('display', 'block');
		$this.text('Hide Normal');		
	}
});	

So, that’s about it, the CSS hooks, although called an advanced feature are really not that hard to use. So, give ’em a try.

Updated 2/10/10 – for the updates to the plugin (See: here)

I made a new jQuery plugin the other day, it is pretty simple, it expands on the idea subscribe/publish idea. Basically it allows you to bind subscriptions to DOM nodes.

You use it like this:

//subscribe a node
$(selector).subscribe(
	'subscription/name',
	function(subName, [arg1], [arg2],...)
	{/*do something*/}
);

//publish
$.publish(
	'subscription/name', [arg1], [arg2],...
);

The idea is that you are probably using sub/pub to keep your DOM interaction separate from your non DOM related javascript. So, when you publish, there is a good chance that the subscriber will take the published information and do something to the DOM based on it. Inside of you sub callback, this is the DOM node following jQuerys normal pattern for this.

You can still setup normal subscriptions like so:

$.subscribe(
	'subscription/name',
	function(subName, [arg1], [arg2],...)
	{/*do something*/}
);

One thing to note is that nothing is actually bound to the nodes. In reality the selector that you give is simply saved, and used again when you publish, so this works like .live in that it will even work on nodes added to the DOM after you subscribe. Also like .live though, you must provide the full selector as a string, and you can’t use any of the traversal methods to select your nodes.

Demo:

The code for this is :

$('#formId').submit(function(e){
	validateForm();
	return false;
});

$('#response').subscribe('formValidateDone', function(subName, result) {
	if(result) {
		$(this).html('The form is valid!');
	} else {
		$(this).html('Please try again!');
	}
});

function validateForm() {
	$.publish('formValidateDone', $('#textInput').val() !== '');
}

Plugin Link: Plugin page

Download: Download