Validation of hidden divs in bootstrap form

Question

I've created a (long) form using Bootstrap 5 that is gathering quite specific information but not all of the inputs are applicable to everyone. To make it a bit more user friendly I split the content into several sections and filter out and hide unrelated later sections using some filter questions in the first section in the following manner:

Wrap the section to be hidden in a plain div with a marker:

<div class="hidden_selection">

And then disable these sections via javascript:

<script>
    $(document).ready(function () {
        $(".select_section").change(function () {
            $(this).find("option:selected").each(function () {
                var val = $(this).attr("value").split(/[-,]+/).pop();
                if (val) {
                    $(".hidden_selection").not("." + val).hide();
                    $("." + val).show();
                } else {
                    $(".hidden_selection").hide();

                }
            });

        }).change();
    });

</script>

This works really well in creating a functional form.I was quietly satisfied until I tried to submit the form. In each section there are many numerical and categorical inputs for the user to fill in and some are required to be submitted for each section so they are defined like this:

<label for="inputNumRepeats" class="form-label">Number of Repeats</label>
<input type="number" class="form-control" name="inputNumRepeats" placeholder="e.g. 5" min="0.00" max="25" step="1" value="{{ request.form['inputNumRepeats'] }}" required>

Note the required attribute being passed to bootstrap so that it can do a simple check when the form submit button is pressed.

The problem with my first attempt is that the required in the hidden sections remain required even though they have been deemed unnecessary by the form logic. I believe I can do something like this for individual input:

    $('#inputNumRepeats').removeAttr('required');
    $('#inputNumRepeats').removeAttr('data-error');

Which would probably solve the problem but would involve some complex processing to loop through each section and manually change the attributes for all the desired input ids in that section while also remembering to switch back on the required attribute if the user switched the form selection after the initial selection.

Is there a simpler and better way to tell bootstrap to ignore all the required inputs when it does it's validation check without this messy jquery fucntion to manually disable the 20-30 inputs across the various disabled sections (while remembering to enable any other ones if the selection changes)?

I think some of the proposed solutions from this question (Form hidden field and required validation use) would work but I would need to have a different class for each section which would still end up with quite a few checks but less than the 30 or so possible individual calls.

Would it make sense to disable all and then just check within each div for a required tag and then enable that? I just don't know what is the best approach to this as html and javascript are not really my thing!

Validation of hidden divs in bootstrap form

0 Answers0