Today I ran into an interesting issue with the combination of the jquery.uniform plug-in in combination with the jquery.validate plug-in. The issue arose because a client had delivered me a very nicely styled contact form, skinned with the Uniform plug-in for JQuery, but the validation they had used on the previous iteration of their site was a somewhat clunky Javascript function with only a standard browser alert box if any required fields weren’t filled in properly.
As I often do, I decided I would try to sneak in some nice, friendly validation for them, (maybe even add in some email phone and zip-code specific validation) and what better to use than the JQuery Validation plug-in. Well, it turns out that the Uniform plug-in skins forms by wrapping certain elements in new elements dynamically on page load. Specifically select elements were not showing their validation messages or styles. Rather than getting frustrated (or rather, as a byproduct of getting frustrated), I dug in a little and started exploring the mechanics of the Validation plug-in. Despite the amazing abilities of JQuery Validation, it’s pretty under-documented, so I figured I would add a little nugget of knowledge to the internet.
Here’s what I found out:
Part of the mechanism of the Uniform plug-in is to wrap elements dynamically in another element which acts as it’s skin. Since this plug-in was being used exclusively to style SELECT elements and not INPUT elements in the form I was working with, this caused a discrepancy in the behavior of the error handling/styling applied by the Validation plug-in. Basically, the error messaging and styling would show up for INPUT elements, but not for SELECT elements. This affected me on two different levels, styling of the invalid SELECT elements and messaging for the invalid SELECT elements.
So ultimately I learned a little about the “highlight” and “errorPlacement” properties for the config object of the Validation plug-in. These control exactly what they sound like they should, and my logic ended up being as follows:
Highlight Configuration:
highlight: function(element, errorClass) {
if (element.tagName == "INPUT") {
$(element).css({ borderColor: 'Red' });
} else if (element.tagName == "SELECT") {
$(element).parent().css({ border: 'Red solid .25px' });
}
}
Error Placement Configuration:
errorPlacement: function(error, element) {
if (element[0].tagName == "INPUT") {
error.insertAfter(element);
} else if (element[0].tagName == "SELECT") {
error.insertAfter(element.parent());
}
element.parent().addClass('error');
}
The logic should be pretty easy to follow…the one “gotcha” was the fact that, while for the “highlight” method the element passed in IS the actual HTML Element, for the “errorPlacement” method, the element passed in is actually an object that wraps the HTML Element in question, thus having to check against “element[0].tagName” rather than “element.tagName”.
Anyway, I hope someone finds this helpful, and for anyone reading this who may know more about the mechanics of the Validation plug-in than I have so far discovered, the more documentation the merrier!