diff --git a/index.html b/index.html index c9d521a..bcfe975 100644 --- a/index.html +++ b/index.html @@ -132,7 +132,7 @@
-
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.
+
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.
@@ -147,6 +147,18 @@
Required fields can be dynamically disabled/enabled.
+ +
+ + +
This field dynamically enables/disables the 'Dependant Child' field if it has a value.
+
+ +
+ + +
This field dynamically enables/disables if the 'Dependant Parent' field has a value.
+
diff --git a/validation.js b/validation.js index 727ad66..edf4f0a 100644 --- a/validation.js +++ b/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', `${this.validationInstance.reqIndicator}`