validation that opens accordion divs

Hey Guys

I've got a form divided into sections, and each section is a js accordion - ie, click on a heading, the section opens up, click on the next heading, the open section closes, the closed section opens, etc. You can see it here at http://www.tantomedia.com/parfait/index.php?option=com_content&view=article&catid=51:your-art&id=529:final-listing&Itemid=438

Anyway, this all works great until you get to the validation part. Any field that hasn't been filled out correctly or skipped that's in a closed div shows the validation error, but the div is closed and the user can't see it.

Here's the code that i'm using:
In "Form Javascript" Section

		window.addEvent('domready', function(){
  new Fx.Accordion($('accordion'), '#accordion h2', '#accordion .content');
});

In "Form HTML" section

<div id = "accordion">
<h2>Section 1 <br/>
Description</h2>
<div class ="content">
form's code for particular section goes here
</div>
</div>

Is there a way to 1) put the validation error in the heading of the accordion div, or 2) open the affected accordion div to show the error? I haven't worked a ton with validation other than using it "out of the box"

Either way, thanx for your help

Mark

Hi marklandry,

There's a tutorial here that tells you how to customise the LiveValidation Error messages. This should let you group the messages so that they are visible.

Bob

That's definitely good to know, but I need the validation message to appear within a particular div. I guess I could use absolute positioning but It would be a ton easier if I could put the message in one of the form's headers...

Hi marklandry,

Apologies, my memory is faulty, the info you need is in the Custom Validations document. You can either do it by replacing all the standard validatiosn with Custom validations (see the other document) or you could hack the com_chronocontact/js/jsvalidation2.js file (doing this will affect all forms on the site).

Around line 80 is this code

			name = new LiveValidation(field, { 
				validMessage: '',
				onlyOnBlur: valonBlur,
				onlyOnSubmit:valonSubmit,
				wait:valwait_time//,
				//onInvalid:function(){ /*this.insertMessage(*/this.createMultiSpan();/*); this.addFieldClass();*/ }
			});

You can add another parameter insertAfterWhatNode : 'messages' where 'messages' is the id that identifies the tag to take the messages.

Bob