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

updated handling of checkboxes

Browse Source
This commit is contained in:
Dan Remollino
2025-04-07 01:22:09 -04:00
parent cb306cefd5
commit 80e996a281
2 changed files with 33 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
index.html
View File

@ -58,11 +58,11 @@
<fieldset class="form-group">
<legend>Check Group</legend>
<span class="form-group__item">
<input data-validation='{"optional": true, "maxCount": 2}' id="checkbox-1" type="checkbox" name="checks">
<input data-validation='{"maxCount": 2}' id="checkbox-1" type="checkbox" name="checks">
<label for="checkbox-1">Checkbox 1</label>
</span>
<span class="form-group__item">
<input id="checkbox-2" type="checkbox" name="checks">
<input data-validation='{"optional": false}' id="checkbox-2" type="checkbox" name="checks">
<label for="checkbox-2">Checkbox 2</label>
</span>
<span class="form-group__item">

77
validation.js
View File

@ -7,7 +7,7 @@ class ValidationField {
maxCount = null
message = null
messageOutputted = null
minCount = null
minCount = 1
optional = false
pattern = null
patternMessage = null
@ -95,24 +95,6 @@ class ValidationField {
// add a native pattern attr if pattern property is present
if (this.pattern) this.el.setAttribute('pattern', this.pattern)
// track minimum selections for checkboxes; todo: add multiple attr support
if (this.el.type === 'checkbox') {
if (!this.validationInstance.multi.hasOwnProperty(this.el.name)) {
this.validationInstance.multi[this.el.name] = {}
// this.validationInstance.multi[this.el.name].count = 0
this.validationInstance.multi[this.el.name].minCount = this.minCount ?? 1
if (this.maxCount) this.validationInstance.multi[this.el.name].maxCount = this.maxCount
}
// if (this.el.checked) this.validationInstance.multi[this.el.name].count++
// this.el.addEventListener('change', () => {
// this.el.checked
// ? this.validationInstance.multi[this.el.name].count++
// : this.validationInstance.multi[this.el.name].count--
// })
}
// add required indicator
if (this.validationInstance.reqIndicators) {
const hasIndicator = this.formGroupEl?.querySelector(`.${this.validationInstance.reqIndicatorClass}`)
@ -141,7 +123,6 @@ class Validation {
form = null
invalidClass = 'invalid'
messageClass = 'invalid__message'
multi = []
onlyOnSubmit = false
onSuccess = null
passConfirm = true
@ -221,19 +202,21 @@ class Validation {
for (const nameAttr of this.reqData) {
const fields = this.form.querySelectorAll(`[name="${nameAttr}"]:where(input, select, textarea)`)
for (const el of fields) {
// checkbox specfic
if (el.type === 'checkbox') {
// combine all data-validation attrs and copy to all checks in the group
const checks = this.form.querySelectorAll(`input[name="${el.name}"]`)
let multiOptions = {}
for (const check of checks) {
Object.assign(multiOptions, check.dataset.validation ? JSON.parse(check.dataset.validation) : {})
el.dataset.validation = JSON.stringify(multiOptions)
}
}
this.reqFields.push(new ValidationField({el: el, validationInstance: this}))
}
}
this.form.addEventListener('submit', e => {
e.preventDefault()
this.validate()
})
this.form.addEventListener('reset', () => {
this.removeErrors()
})
// add/remove a field when disabled attr is dynamically toggled
const observeEls = this.form.querySelectorAll('input, select, textarea, [data-validation]:not(form, input, select, textarea)')
const disabledObserver = new MutationObserver((mutationList, observer) => {
@ -260,6 +243,15 @@ class Validation {
})
}
this.form.addEventListener('submit', e => {
e.preventDefault()
this.validate()
})
this.form.addEventListener('reset', () => {
this.removeErrors()
})
// console.log(this)
}
@ -331,23 +323,16 @@ class Validation {
validateCheckbox(fieldInstance, nameAttrVal) {
const checkCount = this.form.querySelectorAll(`[name="${nameAttrVal}"]:checked`).length
// minCount only
if (!fieldInstance.validationInstance.multi[`${nameAttrVal}`].hasOwnProperty('maxCount')) {
if (checkCount < fieldInstance.validationInstance.multi[`${nameAttrVal}`].minCount) {
let messageMod = fieldInstance.validationInstance.multi[`${nameAttrVal}`].minCount === 1 ? `choice is` : `choices are`
let message = `At least ${fieldInstance.validationInstance.multi[`${nameAttrVal}`].minCount} ${messageMod} required.`
this.addError(fieldInstance, message)
}
}
// minCount and maxCount set
if (fieldInstance.validationInstance.multi[`${nameAttrVal}`].maxCount) {
if (checkCount < fieldInstance.validationInstance.multi[`${nameAttrVal}`].minCount ||
checkCount > fieldInstance.validationInstance.multi[`${nameAttrVal}`].maxCount) {
let message = `At least ${fieldInstance.validationInstance.multi[`${nameAttrVal}`].minCount}, and no more than ${fieldInstance.validationInstance.multi[`${nameAttrVal}`].maxCount} choices are required.`
this.addError(fieldInstance, message)
}
let message
if (fieldInstance.maxCount && (checkCount < fieldInstance.minCount || checkCount > fieldInstance.maxCount)) {
message = fieldInstance.minCount !== fieldInstance.maxCount
? `At least ${fieldInstance.minCount}, and no more than ${fieldInstance.maxCount} choices are required.`
: `${fieldInstance.minCount} choices are required.`
this.addError(fieldInstance, message)
} else if (checkCount < fieldInstance.minCount) {
let messageMod = fieldInstance.minCount === 1 ? `choice is` : `choices are`
message = `At least ${fieldInstance.minCount} ${messageMod} required.`
this.addError(fieldInstance, message)
}
}