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"> <fieldset class="form-group">
<legend>Check Group</legend> <legend>Check Group</legend>
<span class="form-group__item"> <span class="form-group__item">
<input data-validation='{"minCount": 2}' id="checkbox-1" type="checkbox" name="checks"> <input data-validation='{"optional": true, "maxCount": 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">

20
validation.js
View File

@ -4,6 +4,7 @@ class ValidationField {
isValid = null isValid = null
labelEl = null labelEl = null
labelText = null labelText = null
maxCount = null
message = null message = null
messageOutputted = null messageOutputted = null
minCount = null minCount = null
@ -100,6 +101,7 @@ class ValidationField {
this.validationInstance.multi[this.el.name] = {} this.validationInstance.multi[this.el.name] = {}
// this.validationInstance.multi[this.el.name].count = 0 // this.validationInstance.multi[this.el.name].count = 0
this.validationInstance.multi[this.el.name].minCount = this.minCount ?? 1 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++ // if (this.el.checked) this.validationInstance.multi[this.el.name].count++
@ -328,15 +330,27 @@ class Validation {
} }
validateCheckbox(fieldInstance, nameAttrVal) { 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 messageMod = fieldInstance.validationInstance.multi[`${nameAttrVal}`].minCount === 1 ? `choice is` : `choices are`
let message = `At least ${fieldInstance.validationInstance.multi[`${nameAttrVal}`].minCount} ${messageMod} 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) 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)
}
}
}
validateEmail(fieldInstance) { validateEmail(fieldInstance) {
const regex = new RegExp(/^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/) const regex = new RegExp(/^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/)
if (!regex.test(fieldInstance.el.value)) { if (!regex.test(fieldInstance.el.value)) {