danremollino/form-validation
1
0
Fork 0
Code Issues Pull Requests Projects Releases Activity

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

Browse Source 
validation in order to remove the disabled status of the dependent field
This commit is contained in:
Dan Remollino
2025-04-12 22:48:25 -04:00
parent cb57869a94
commit 2cc6b61b33
2 changed files with 23 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
README.md
View File

@ -441,7 +441,8 @@ properly formatted JSON object with the properties and values below.
**Default:** `null` **Default:** `null`
Setting the `dependent` value of one field to another field's `name` attribute 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 ```html
<figure class="form-group"> <figure class="form-group">

23
validation.js
View File

@ -101,8 +101,16 @@ class ValidationField {
const parents = this.validationInstance.form.querySelectorAll(`[name="${this.dependent}"]`) const parents = this.validationInstance.form.querySelectorAll(`[name="${this.dependent}"]`)
const depCheck = () => { const depCheck = () => {
if (((parents[0].type === 'checkbox' || parents[0].type === 'radio') && this.validationInstance.form.querySelectorAll(`[name="${this.dependent}"]:checked`).length > 0) || let fieldsValid = true
(((parents[0].type !== 'checkbox' && parents[0].type !== 'radio') && parents[0].value))) { 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') this.el.removeAttribute('disabled')
} else { } else {
this.el.setAttribute('disabled', 'disabled') 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) { parseField(fieldInstance) {
const nameAttrVal = fieldInstance.el.name const nameAttrVal = fieldInstance.el.name