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:
@ -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">
|
||||
|
@ -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
|
||||
|
||||
|
Reference in New Issue
Block a user