conditionalFields
Shows a group of fields only while another field asks for it — and takes it out of the submit and the validation while it is closed.
Five forms, one component. Each group is a plain
<fieldset> with one attribute,
data-conditional-when. While it is closed it is
hidden and disabled — so the
fields in it are not only out of sight, they are out of the submit and
out of the validation.
1 — A checkbox, required fields, and formValidation
The delivery fields carry data-conditional-required,
which the module turns into required — so without
the script they are optional, and the full form can still be
sent. Closed, they do not count: send the form with the box
unticked and it goes through. The panel below shows what a submit
would send.
Nothing sent yet.
2 — By value: a select and a radio group
contactBy=phone|sms opens on either value;
newsletter!=none opens on anything but “none”. Change
something, then press Reset: the groups follow the
restored defaults, although a reset fires no input.
The select is here to show that it works; in a real form prefer
radios, because on Windows the arrow keys change a closed select
— and its groups — with every press.
Nothing sent yet.
3 — AND, chains, and an authored disabled
The VAT field is nested in the company group, so
it needs both boxes. The invoice-email group depends on a field
inside the company group: untick “company” and it
closes too, although it sits outside. The last group ships
disabled — shown and hidden, never enabled.
Nothing sent yet.
4 — Three mistakes you can read in the console
A condition naming a field this form does not have, and the
attribute on a <div>, which cannot disable what it
holds. Both groups stay visible — a group shown by mistake costs a
glance, one hidden by mistake costs the fields in it. The third
group works, but sits above its switch, where a
reader who ticks the box will not meet it: that is reported too.
5 — A switch outside the form
The checkbox sits outside the
<form> and joins it through
form="d5-form" — a layout that puts a field in a
sidebar or a page header does that. The group still follows it,
and the panel shows it is sent with the form.
Nothing sent yet.