added dependant fields; fixed disabled fields getting a required indicator on page load

This commit is contained in:
2025-04-12 00:54:08 -04:00
parent f842fbf9b9
commit 5f9ab78353
2 changed files with 29 additions and 2 deletions

View File

@ -132,7 +132,7 @@
<figure class="form-group">
<label for="not-required">Text (Optional)</label>
<input data-validation='{"optional": true}' id="not-required" type="text" name="not_required">
<figcaption>Optional fields will allow blank input, but will validate non-blank value based on the input's type attribute and/or custom pattern if supplied.</figcaption>
<figcaption>Optional fields will allow a blank value, but will validate a non-blank value based on the input's type attribute and/or custom pattern if supplied.</figcaption>
</figure>
<figure class="form-group">
@ -147,6 +147,18 @@
<button type="button" onclick="document.querySelector('#disabled').toggleAttribute('disabled')">Toggle Disabled Attribute</button>
<figcaption>Required fields can be dynamically disabled/enabled.</figcaption>
</figure>
<figure class="form-group">
<label for="dependant-parent">Dependant Parent</label>
<input id="dependant-parent" type="text" name="dependant_parent">
<figcaption>This field dynamically enables/disables the 'Dependant Child' field if it has a value.</figcaption>
</figure>
<figure class="form-group">
<label for="dependant-child">Dependant Child</label>
<input data-validation='{"dependant": "dependant_parent"}' id="dependant-child" type="text" name="dependant_child">
<figcaption>This field dynamically enables/disables if the 'Dependant Parent' field has a value.</figcaption>
</figure>
</fieldset>
<fieldset>