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

added support for setting a minimum number of selections in a check group

Browse Source
This commit is contained in:
Dan Remollino
2025-04-06 14:37:03 -04:00
parent 10a233af1a
commit 1640acfbcd
2 changed files with 27 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
index.html
View File

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

27
validation.js
View File

@ -6,6 +6,7 @@ class ValidationField {
labelText = null labelText = null
message = null message = null
messageOutputted = null messageOutputted = null
minCount = null
optional = false optional = false
pattern = null pattern = null
patternMessage = null patternMessage = null
@ -93,6 +94,23 @@ class ValidationField {
// add a native pattern attr if pattern property is present // add a native pattern attr if pattern property is present
if (this.pattern) this.el.setAttribute('pattern', this.pattern) 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.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 // add required indicator
if (this.validationInstance.reqIndicators) { if (this.validationInstance.reqIndicators) {
const hasIndicator = this.formGroupEl?.querySelector(`.${this.validationInstance.reqIndicatorClass}`) const hasIndicator = this.formGroupEl?.querySelector(`.${this.validationInstance.reqIndicatorClass}`)
@ -121,6 +139,7 @@ class Validation {
form = null form = null
invalidClass = 'invalid' invalidClass = 'invalid'
messageClass = 'invalid__message' messageClass = 'invalid__message'
multi = []
onlyOnSubmit = false onlyOnSubmit = false
onSuccess = null onSuccess = null
passConfirm = true passConfirm = true
@ -309,8 +328,12 @@ class Validation {
} }
validateCheckbox(fieldInstance, nameAttrVal) { validateCheckbox(fieldInstance, nameAttrVal) {
if (!this.form.querySelector(`[name="${nameAttrVal}"]:checked`)) { let messageMod = fieldInstance.validationInstance.multi[`${nameAttrVal}`].minCount === 1 ? `choice is` : `choices are`
this.addError(fieldInstance, `At least one choice is required.`) let message = `At least ${fieldInstance.validationInstance.multi[`${nameAttrVal}`].minCount} ${messageMod} required.`
if (this.form.querySelectorAll(`[name="${nameAttrVal}"]:checked`).length <
fieldInstance.validationInstance.multi[`${nameAttrVal}`].minCount) {
this.addError(fieldInstance, message)
} }
} }