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

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

Browse Source
This commit is contained in:
Dan Remollino
2025-04-06 16:39:05 -04:00
parent 1640acfbcd
commit cb306cefd5
2 changed files with 20 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
index.html
View File

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

24
validation.js
View File

@ -4,6 +4,7 @@ class ValidationField {
isValid = null
labelEl = null
labelText = null
maxCount = null
message = null
messageOutputted = null
minCount = null
@ -100,6 +101,7 @@ class ValidationField {
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++
@ -328,12 +330,24 @@ class Validation {
}
validateCheckbox(fieldInstance, nameAttrVal) {
let messageMod = fieldInstance.validationInstance.multi[`${nameAttrVal}`].minCount === 1 ? `choice is` : `choices are`
let message = `At least ${fieldInstance.validationInstance.multi[`${nameAttrVal}`].minCount} ${messageMod} required.`
const checkCount = this.form.querySelectorAll(`[name="${nameAttrVal}"]:checked`).length
if (this.form.querySelectorAll(`[name="${nameAttrVal}"]:checked`).length <
fieldInstance.validationInstance.multi[`${nameAttrVal}`].minCount) {
this.addError(fieldInstance, message)
// 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)
}
}
}