Expected behavior

Disable validation for invisible fields (inside Divs with d-none class) and go to next step.

Actual behavior

I'm following doc in this link:

https://mdbootstrap.com/docs/standard/components/stepper/#section-form-wizard

And using data-mdb-stepper-linear="true" in the stepper.

The first step contains a select category element. based on the selected category, options should be shown in the next step. It works fine, but in the second step, on validate, it does not work because of fields that are not set inside hidden DIVs.

Here is a sample of hidden field (using bootsrap d-none class):

<div class="form-group row my-3 option d-none" id="area">
    <div class="w-25 fw-bold">Surface</div>
    <div class="w-75 form-outline">
        <input type="number" id="ss_advert_area" name="ss_advert[area]" class="form-control form-control-lg">
        <label class="form-label select-label" for="ss_advert_area" style="margin-left: 0px;">
            Surface
            <small class="text-muted">(Obligatoire)</small>
        </label>
        <div class="invalid-feedback">Non valide</div>
    <div class="form-notch"><div class="form-notch-leading" style="width: 9px;"></div><div class="form-notch-middle" style="width: 8px;"></div><div class="form-notch-trailing"></div></div></div>
    <div class="error  w-100">

    </div>
</div>

this element is hidden but it blocks validation and can not go to next step.

And this is the javascript code that i use to validate fields:

document.querySelector('#stepper-form-ad .stepper-step').addEventListener('onChangeStep.mdb.stepper', (e) => {

$('#stepper-form-ad .stepper-active input').each(function(index){
    //if the root parent is invisible disable validation.
    if ($(this).parent().parent().parent().parent().hasClass('d-none')){
        this.setCustomValidity('');
    }else{
       // Validate visible fields
       // Not implemented yet
    }
});

Resources (screenshots, code snippets etc.)