How to disable validation for hidden fields inside stepper ?


Topic: How to disable validation for hidden fields inside stepper ?

SKONSOFT pro premium priority asked 3 years ago

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.)


Marcin Luczak staff commented 3 years ago

Hi,

As your input element doesn't have a required attribute, there is no need to validate it at all. It won't be taken into account in the default stepper validator and it should not cause any problems. Would you be able to create a snippet with your code to show your implementation of the stepper? It may be another part of your code that causes this problem.

Keep coding, Marcin


Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Open

Specification of the issue
  • User: Pro
  • Premium support: Yes
  • Technology: MDB jQuery
  • MDB Version: MDB4 4.20.0
  • Device: web
  • Browser: Chrome
  • OS: Ubuntu
  • Provided sample code: No
  • Provided link: Yes