This topic will cover the <input > fields structure and setup dependencies within form-v2 forms. The base form-v2 guidelines can be found there:
The minimal form-v2 struture required is:
<div class="input-container"> <input type="text" name="firstname"> </div>
The common structure on form-v2 forms is to have a warning handler showing under the input field if it hasn't been filled in correctly:
<div class="input-container" data-empty-warning="Looks like there's nothing here. Could you please check?"> <div class="input-field"> <input type="text" name="firstname" data-mandatory-input="true"> </div> <div class="input-warning"> Looks like there's nothing here. Could you please check? </div> </div>
The form structure and its fields can change depending on some user preferences, for instance if the user wants to be contacted by phone rather than email he can toggle the contact field with some radio buttons(example: here).
The purposes of this feature is to play on the visibility but also to make mandatory fields handling easier, any mandatory field which is hidden in a non-active dynamic content will be ignored by the frontend form validation.
setup: Add a data-activate attribute to a checkbox/radio button with a class name pointing to some .element-dynamic elements to toggle their visibility with active classes(e.g: data-activate=".email-dynamic" will toggle the visibility of each .email-dynamic element in the form). The checkbox/radio button must be part of a .select-dynamic container If your .element-dynamic contains an input, add an .input-dynamic class to the input node(this will help the form validation for mandatory fields part of .element-dynamic
<div class="select-dynamic"> <input data-activate="dynamic-content-1" type="radio" name="medium" id="medium-1" value="content1" checked=""> <label class="check" for="medium-1">Activate content 1</label> <input data-activate="dynamic-content-2" type="radio" name="medium" id="medium-2" value="content2"> <label class="check" for="medium-2">Activate content 2</label> </div> <div class="element-dynamic active dynamic-content-1">This is content 1</div> <div class="element-dynamic dynamic-content-2">This is content 2</div>
Options are usually added on the <input > element itself, they usually indicate how the input should be validated, if it's mandatory, etc...
data-mandatory-input: (value: boolean)
data-validation: (value: String)
Optional: validation types are the following:
lengthdepends on a max-length or/and min-length data attribute
multipleEmailsdoes an email validation on each email separated by commas or semicolon
selectmakes sure a dropdown selection has been done
Note Multiple validation rule can be combined by separating them with a space
data-mandatory-toggle-target: (value: String)
.input-dynamic: mandatory class to add to an input IF it is part of a .element-dynamic container