Only required if wizard page edited

[markeaston63]

Is your feature request related to a problem? Please describe. We have wizard pages that have required fields only if the form is edited. Eg for a "Primary Contact" the user can choose to enter one in or not. If the user starts entering in the First Name or Last Name etc then the required fields are activated. I call it "onActiveRequired". In the case of the Primary Contact form the required fields become First Name, Last Name, Location and Email.

Id like to code this into a PR or a fork - whichever you prefer.

Describe the solution you'd like I have already coded it in our copy of your code. A field is given a class of "on-active-required". In formValidator we check for "required" and "on-active-required" if (check) { pageIsActive = true } else { onPageActiveTarget.push(e) check = true; } After we have processed the entire form we see if pageIsActive is true If it is true we add the fields in the onPageActiveTarget array to the target array (ie they are now required as the form has had data entered in.

Also need to change dispatchInput ... (and pass true or false to it as required)

dispatchInput: function (wz_content, isRequired, e) {
    let type = e.getAttribute("type");
    if (!isRequired && e.value === "")
    {
        return true;
    }

Works beautifully - QA has already tested it here.

Describe alternatives you've considered None that I could think of. I would endeavour to recode the above as nicely as possible. Think of some way to split the functionality in some way to another method to make it read better.

Additional context I also have a related feature we need. If we have two fields on a form. One a drop down and one a text field. If a certain value is selected in the drop down then the text field becomes mandatory. These are common features we have in all our wizards so would rather code it once in the wizard.

What do you think? If you give me the all clear - I will code up both features as two PRs immediately.

[markeaston63]

We are likely to need quite a few features added to your wizard over time. We are very happy to work with you. This is who we are: www.naverisk.com. Great component by the way. Cheers

[markeaston63]

Hi Adrian,

I have the enhancement coded - but I need a branch please.

Mark

[AdrianVillamayor]

Hi @markeaston63 ,

I sincerely apologize for the delay in delivering this solution. I understand how crucial timely fixes are, and I appreciate your patience and understanding during this time.

With this update, I’ve added a new feature that allows elements to be conditionally required. This means you can now specify when certain fields need to be filled out, providing much greater flexibility in form validation. It’s especially useful for scenarios where fields should only become mandatory when a user edits specific sections of a wizard page.

Here’s an example of how the updated functionality can be used:

<div class="wizard-step" data-title="Test">
    <div class="form-group">
        <label for="nameCampaign">Campaign name <span class="required">*</span></label>
        <select class="form-control" id="dropdown" name="dropdown">
            <option value="">Select an option</option>
            <option value="other">Other</option>
        </select>
    </div>

    <div class="form-group mt-3">
        <label for="descCampaign">Description of the campaign</label>
        <input class="form-control" type="text" id="otherField" name="otherField"
            data-require-if="dropdown:other" placeholder="Please specify" />
    </div>
</div>

You have it all documented in the Readme.me and in the Changelog.

I hope this update resolves the issue you were facing, but if there’s anything else you need or if you have any further questions, please don’t hesitate to reach out.

Thank you very much for your help 🙌🏻.