Moving validation messages

I have read the forums and tried everything people have suggested but i cant move the validation messages to a div at the top of my form.

The form is split into several tabs using a moo accordion.
The submit button is a the bottom outside of the accordion.

When the user uses the button i need to either move the error message validation from the hidden tab to a visible div above the form or tie into the validation javascript and open the correct tab if it is hidden.

Ive attached a screenshot of the page i am working on.

Please can anyone give me any pointers?

Many thanks
John


image hosting png

Hi John,

Just checking this is ChronoForms v4? If so FormCheck does support a 'target' parameter but I don't think Max has built the setting into ChronoForms. See the FormCheck docs here; you may also need my Show HTML [GH] action which ahs a box for FormCheck options.

Bob

Hey Bob

Thanks for your quick response!

I previously downloaded and installed your plugin and looked at the formcheck site but couldnt get the target function to work. Have you used it before?

If so, what do i add to the formcheck text box?

Many thanks
John

Hi John,

No I've never used it :-( I'll add it to the to-do list . . .

Bob

Hey Bob

What i ended up doing was to put some javascript code on the inputs on the form for the focus event.

If a validation message is created for an input it give the input focus so i picked up on that event and simply get the accordian index and then use it to show the correct tab.

ie.

$$('#chronoform_requestDetailsMooTabbed input[type="text"], #chronoform_requestDetailsMooTabbed select').addEvent('focus', function(e) {

var classesArray = e.target.getParents('.content').get('class');
var tabIndex = classesArray[0].replace("content detailsTab", "")-1;
accordion.display(tabIndex);

});

As well as fix the validation problem it also allows the user to tab through the inputs and when it gets to an input in a hidden tab it opens it up too.

I dont know if this will help anyone but i like to put the solution in case it does.

I could not get the target:myDiv function to work with the formcheck.js file.

Thanks
John

Hi John,

Thank you, sounds like a good solution.

Bob

Hi John,

Impressive!! thanks for sharing!🙂

Regards,
Max