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

index.html

@@ -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>

validation.js

@@ -1,4 +1,5 @@
 class ValidationField {
+    dependant = null
     el = null
     formGroupEl = null
     isValid = null
@@ -95,10 +96,24 @@ class ValidationField {
             // add a native pattern attr if pattern property is present
             if (this.pattern) this.el.setAttribute('pattern', this.pattern)
 
+            // dependant fields
+            if (this.dependant) {
+                const parent = this.validationInstance.form.querySelector(`[name=${this.dependant}]`)
+
+                const depCheck = () => {
+                    parent.value
+                        ? this.el.removeAttribute('disabled')
+                        : this.el.setAttribute('disabled', 'disabled')
+                }
+                depCheck()
+
+                parent.addEventListener('input', depCheck)
+            }
+
             // add required indicator
             if (this.validationInstance.reqIndicators) {
                 const hasIndicator = this.formGroupEl?.querySelector(`.${this.validationInstance.reqIndicatorClass}`)
-                if (!hasIndicator && !this.optional) {
+                if (!hasIndicator && !this.optional && !this.el.disabled) {
                     this.labelEl?.insertAdjacentHTML(
                         'beforeend',
                         `<span class="${this.validationInstance.reqIndicatorClass}">${this.validationInstance.reqIndicator}</span>`