Multiple conditional elements

It’s not pretty, but I guess I would do it like this:

<p>
<label for="MAKER">Maker</label>
<select name="MAKER" required id="MAKER">
<option>Audi</option>
<option>Ford</option>
<option>Other</option>
</select>
</p>
<p data-hide-if="MAKER:Other">
<label for="MODEL">Model</label>
<select name="MODEL" required id="MODEL">
<option>A1</option>
<option>A2</option>
<option>Fiesta</option>
<option>F-150</option>
<option>Other</option>
</select>
</p>

<p data-show-if="MAKER:Other">
<label for="MAKER_OTHERS">Maker (others)</label>
<input type="text" name="MAKER_OTHERS" required id="MAKER_MODEL_OTHERS" />
  <input type="text" name="MAKER_MODEL_OTHERS" required id="MAKER_MODEL_OTHERS" />
</p>
<p data-show-if="MODEL:Other|MAKER:Other">
<label for="MODEL_OTHERS">Model (others)</label>
<input type="text" name="MODEL_OTHERS" required id="MODEL_OTHERS" />
</p>

Hope that helps. If you have any questions, please let me know!

Hi,

thank you very much for your response. I cam up with a simlar, dirty solution were I have two input field for MODEL_OTHERS.

But in youe example you use data-show-if="MODEL:Other|MAKER:Other". Is that really supported? I tried using it and it only works for the first element, MODEL:Other in this example. I think the | to declare and OR relationship only works for values not elements or am I mistaken?

Hi, it is not, sorry that must have been a left behind trial and error bit ??

One thing about the dirty solution, I think the fields should not have the same field name if it’s a duplicate field, else it might only pick up the value of the last occurrence.

Hi,

I already change the duplicate names and also added some server side validation.

Playing around with the data-hide-if attribute I think I encountered a bug when using a required input.

In that case HTMLForms removes the required attribute from the input element and replaces it with a data-was-required:true attribute. Thats a nice solution to add detect if a ‘required’ tag needs to be added back, but it is not added back. That leads to problems with front-end form validation, because fields that were set as required are not required anymore.

I build a simple example with data-hide-if, to show the problem.

<p>
  <label for="SELECT_1">Select a option</label>
  <select name="SELECT_1" required id="SELECT_1">
    <option value="" disabled selected hidden>Select</option>
    <option value="One">One (hides the text field)</option>
    <option value="Two">Two</option>
  </select>
</p>
<p data-hide-if="SELECT_1:One">
	<label for="HIDDEN_TEXT">Text field (is hidden if you select one)</label>
	<input type="text" name="HIDDEN_TEXT" required id="HIDDEN_TEXT" />
</p>
<p>
	<input type="submit" value="Absenden" />
</p>

In this example the text field is set as required, but this attribute is remove by HTMLForms on page load an replaced with data-was-required:true. I would expect the text field to required, so that the form valdiation works and it is not possible to submit the form with an empty text field.

If I use data-show-if it works as expected. But it is not always possible to use data-show-if instead of data-hide-if:

<p>
  <label for="SELECT_1">Select a option</label>
  <select name="SELECT_1" required id="SELECT_1">
    <option value="" disabled selected hidden>Select</option>
    <option value="One">One (shows the text field)</option>
    <option value="Two">Two</option>
  </select>
</p>
<p data-show-if="SELECT_1:One">
	<label for="HIDDEN_TEXT">Text field (is visible if you select one)</label>
	<input type="text" name="HIDDEN_TEXT" required id="HIDDEN_TEXT" />
</p>
<p>
	<input type="submit" value="Absenden" />
</p>

• This reply was modified 2 years, 5 months ago by yann1ck.

Hi @lapzor did you perhaps miss my addtional question, because the topic is already marked as resolved?

Thanks for reminding me. I’ve just checked your example code on my test site, and it works as it should (the field is required).

Where can I test this on your site where the issue exists?
Are you using anything to combine or compress JS code?

Thanks for letting me know.

Hi Lap,

thank ou very much for your response and I am super sorry that I didnt answer las week, but it was a busy week.

I am not using anything to combine and minify JS.

You can test on this site: https://masterliste.psyfako.org/test-formular/

The forms are exactly the two forms from above. Its a Divi site but I have the same problem on a staging site that using a clean install.

Do you need more information?

Here is my test with a copy of the code you shared above: <redacted>

As you can see, it works there!
Can you share the staging site as well? If you prefer you can email us on [email protected]

Kind regards,

Hi Lap,

your example shows the working example with data-show-if, not the not-working one with data-hide-if. Form 1 in my example.

In that example the HIDDEN_TEXT input is set as required, but I am able to submit the form even if the input field is empty. The validation is not working because HTML Forms removes the required attribute and replaces it with data-was-required:true. I would expect the required attribute to be added back if a input field is not hidden.

Ah ok sorry I must have misread it or accidentally copied the wrong one.
I’ve confirmed and replicated the issue and created a bug report here: https://github.com/ibericode/html-forms/issues/117

Hi, thank you very much for looking into the error and creating a bug report! ??

Hi Lap,

is that bug on the roadmap for a future version? I tried to fix it myself yesterday, playing around with the conditionality.js, but it is beyond my abilities ??

Kind Regards

Yannick

Yes it’s definitely on the roadmap to fix this issue.

When exactly this will be fixed I can’t say yet though.