the target of 'dependent' must now contain a value that passes

validation in order to remove the disabled status of the dependent field
This commit is contained in:
2025-04-12 22:48:25 -04:00
parent cb57869a94
commit 2cc6b61b33
2 changed files with 23 additions and 3 deletions

View File

@ -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
<figure class="form-group">

View File

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