diff --git a/README.md b/README.md index 860437d..f393ac9 100644 --- a/README.md +++ b/README.md @@ -441,7 +441,8 @@ properly formatted JSON object with the properties and values below. **Default:** `null` Setting the `dependent` value of one field to another field's `name` attribute -value will disable the field when its dependent does not contain a value. +value will disable the field when its dependent field does not contain a +*valid* value. ```html
diff --git a/validation.js b/validation.js index b37e836..fe1065e 100644 --- a/validation.js +++ b/validation.js @@ -101,8 +101,16 @@ class ValidationField { const parents = this.validationInstance.form.querySelectorAll(`[name="${this.dependent}"]`) const depCheck = () => { - if (((parents[0].type === 'checkbox' || parents[0].type === 'radio') && this.validationInstance.form.querySelectorAll(`[name="${this.dependent}"]:checked`).length > 0) || - (((parents[0].type !== 'checkbox' && parents[0].type !== 'radio') && parents[0].value))) { + let fieldsValid = true + const fields = this.validationInstance.getFields(parents[0].name) + for (const field of fields) { + for (const error of this.validationInstance.errors) { + if (field === error) fieldsValid = false + } + } + + if (((parents[0].type === 'checkbox' || parents[0].type === 'radio') && this.validationInstance.form.querySelectorAll(`[name="${this.dependent}"]:checked`).length > 0 && fieldsValid) || + (((parents[0].type !== 'checkbox' && parents[0].type !== 'radio') && parents[0].value && fieldsValid))) { this.el.removeAttribute('disabled') } else { this.el.setAttribute('disabled', 'disabled') @@ -293,6 +301,17 @@ class Validation { } } + // get all fields with the same name attribute + getFields(nameAttr) { + let matches = [] + for (const fieldInstance of this.reqFields) { + if (fieldInstance.el.name == nameAttr) { + matches.push(fieldInstance) + } + } + return matches + } + parseField(fieldInstance) { const nameAttrVal = fieldInstance.el.name