displaying hidden required fields and validating onsubmit

[jimmywiddle]

My form is completed by the user in steps, by revealing hidden fields/divs when the user clicks to goto the next step.

The issue is if the user submits the form without revealing the hidden fields/divs (user didn't click to goto step 2) the validation doesn't happen for the hidden required fields.

The code below will display/show the required field onclick on the submit button, but the validation doesn't happen and the form is processed without the required field.

$('#btn-submit').click(function(){ if (!$('#field_short_description').hasClass("show")) { $('#field_short_description').addClass('show') } })

If anyone possibly has any idea on how to display the field and run the validation on it onsubmit id very much appreciate it. Many thanks!

[vincentwansink]

I'm having the same issue using a jQuery Accordion. Only the accordion panel that is currently active is validated on submit. I need to validate all the panels, whether active or not.

[vincentwansink]

Somebody else said to do this:

$(document).ready(function(){
    $("#formID").validationEngine({
        validateNonVisibleFields: true,
        updatePromptsPosition:true
    });
});

That kind of works, except the error messages pile up in the corner rather than over each respective field, and also the form does not make the hidden field visible (by opening the accordion panel) and scroll to it.