I would like an answer on best practices, but in the meantime, I think I can solve you issue. It is working on my form anyway. I am using jQuery which I load in compatibility mode, so if you don't you'll have to work out the mootools difference or load jQuery. Also, I am using EasyMode which I understand to not be the common choice.
I could not figure out how to get the syntax correct for custom validation code within the element, so I created a function in the available scripts and made a package of scripts just for this web site (vrm which you will see as a function prefix).
I created a new validation script under "Manage Scripts" and gave it the package VRM to separate it from the built in functions. It's type is "Element Validation." The code is:
function vrm_applianceInfoValidate(element,message) {
if (jQuery("#ff_elem206").is(":checked")) {
if (element.value == '') {
if (message=='') {
message = "If this is an appliance problem, we need the make and model of the appliance.";
}
ff_validationFocus(element.name);
return message;
} else {
return '';
}
} else {
return '';
}
}
(Updated: I added the final return '' code to the if checked statement. Without it, validation returns an "undefined" if the checkbox is not checked.)
I could perhaps use jQuery to search for the checkbox before this element to make it more reusable, but that is still pretty restrictive, so I just target this script to the controlling element, "#ff_elem206" which is a checkbox.
In my case, I also created a toggle script for the checkbox to show/hide the textbox item, and a script to initially hide any element. What I found was that when the validation returns an error, the form is reinitialized, so my textbox would be hidden while the checkbox was still checked (opposite of intended results). To resolve that, I had to create a specific hiding script for the element that checked the value of the checkbox on form load to decide whether or not to hide the element.
