I am in the process of developing a lengthy form using the jQuery plugin called formToWizard. Within one of the fieldsets located midway through the form, there are hidden fields that are displayed upon clicking a button. The strange issue I am encountering is that unless these fields are shown, the next button redirects the user to the beginning with empty fields. Interestingly, when I remove the CSS, it works fine.
Even more peculiar is that the previous fieldset, which has an identical structure, does not experience any problems. Has anyone else faced this issue and found a solution?
Here is the relevant code:
HTML
<fieldset>
<legend>Part 3 Sworn declaration</legend>
<!-- Fieldset content -->
</fieldset>
jQuery show functions
function addSwornTwo() {
$('#second_sworn').show("fast");
}
function addSwornThree() {
$('#third_sworn').show("fast");
}
function addSwornFour() {
$('#fourth_sworn').show("fast");
}
CSS
#second_sworn {
display: none;
}
#third_sworn {
display: none;
}
#fourth_sworn {
display: none;
}
Validation function
$( function() {
var $signupForm = $( '#eProbateForm' );
// Validation logic
$signupForm.formToWizard({
// Form wizard setup options
});
});
Any guidance on resolving this issue would be greatly appreciated.
EDIT: Update - It appears that the checkboxes are causing the problem. I am receiving the error message "Cannot read property 'name' of undefined". Why can't the validator simply ignore the hidden fields? These fields are not set as required. Is there a workaround for this?