Skip to content

Commit 01278e9

Browse files
colinautcolinaut
committed
fix: issue with checkbox groups error messages; bug introduce in recent other fix
1 parent ec0c769 commit 01278e9

5 files changed

+21
-36
lines changed

‎dist/alpine.validate.cjs.js

+4-8
Original file line numberDiff line numberDiff line change
@@ -271,7 +271,7 @@ var Plugin = function(Alpine) {
271271
}
272272
if (isHtmlElement(el, FORM)) {
273273
if (!modifiers.includes("use-browser")) {
274-
el.setAttribute("novalidate", true);
274+
setAttr(el, "novalidate", "true");
275275
}
276276
if (modifiers.includes("validate-on-submit")) {
277277
el.addEventListener("submit", function(e) {
@@ -316,7 +316,7 @@ var Plugin = function(Alpine) {
316316
});
317317
function toggleError(field, valid) {
318318
const parentNode = getData(field).parentNode;
319-
const errorMsgNode = getErrorMsgFromId(field);
319+
const errorMsgNode = document.getElementById(getAttr(field, "aria-errormessage"));
320320
setAttr(field, "aria-invalid", !valid);
321321
if (valid) {
322322
setAttr(errorMsgNode, HIDDEN);
@@ -336,17 +336,13 @@ var Plugin = function(Alpine) {
336336
}
337337
return false;
338338
}
339-
function getErrorMsgFromId(field) {
340-
const id = getAttr(field, "id");
341-
return document.getElementById(`${ERROR_MSG_CLASS}-${id}`);
342-
}
343339
function addErrorMsg(field) {
344340
const fieldData = getData(field);
345341
const targetNode = includes(fieldData.mods, GROUP) ? fieldData.parentNode : field;
346342
const span = document.createElement("span");
347343
span.className = ERROR_MSG_CLASS;
348-
const errorMsgNode = getErrorMsgFromId(field) || findSiblingErrorMsgNode(targetNode) || span;
349-
const id = getMakeId(field);
344+
const errorMsgNode = document.getElementById(`${ERROR_MSG_CLASS}-${getAttr(targetNode, "id")}`) || findSiblingErrorMsgNode(targetNode) || span;
345+
const id = getMakeId(targetNode);
350346
const errorMsgId = `${ERROR_MSG_CLASS}-${id}`;
351347
if (getAttr(errorMsgNode, "id") !== errorMsgId) {
352348
setAttr(errorMsgNode, "id", errorMsgId);

‎dist/alpine.validate.esm.js

+4-8
Original file line numberDiff line numberDiff line change
@@ -258,7 +258,7 @@ var Plugin = function(Alpine) {
258258
}
259259
if (isHtmlElement(el, FORM)) {
260260
if (!modifiers.includes("use-browser")) {
261-
el.setAttribute("novalidate", true);
261+
setAttr(el, "novalidate", "true");
262262
}
263263
if (modifiers.includes("validate-on-submit")) {
264264
el.addEventListener("submit", function(e) {
@@ -303,7 +303,7 @@ var Plugin = function(Alpine) {
303303
});
304304
function toggleError(field, valid) {
305305
const parentNode = getData(field).parentNode;
306-
const errorMsgNode = getErrorMsgFromId(field);
306+
const errorMsgNode = document.getElementById(getAttr(field, "aria-errormessage"));
307307
setAttr(field, "aria-invalid", !valid);
308308
if (valid) {
309309
setAttr(errorMsgNode, HIDDEN);
@@ -323,17 +323,13 @@ var Plugin = function(Alpine) {
323323
}
324324
return false;
325325
}
326-
function getErrorMsgFromId(field) {
327-
const id = getAttr(field, "id");
328-
return document.getElementById(`${ERROR_MSG_CLASS}-${id}`);
329-
}
330326
function addErrorMsg(field) {
331327
const fieldData = getData(field);
332328
const targetNode = includes(fieldData.mods, GROUP) ? fieldData.parentNode : field;
333329
const span = document.createElement("span");
334330
span.className = ERROR_MSG_CLASS;
335-
const errorMsgNode = getErrorMsgFromId(field) || findSiblingErrorMsgNode(targetNode) || span;
336-
const id = getMakeId(field);
331+
const errorMsgNode = document.getElementById(`${ERROR_MSG_CLASS}-${getAttr(targetNode, "id")}`) || findSiblingErrorMsgNode(targetNode) || span;
332+
const id = getMakeId(targetNode);
337333
const errorMsgId = `${ERROR_MSG_CLASS}-${id}`;
338334
if (getAttr(errorMsgNode, "id") !== errorMsgId) {
339335
setAttr(errorMsgNode, "id", errorMsgId);

‎dist/alpine.validate.min.js

+1-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎examples/alpine.validate.js

+4-8
Original file line numberDiff line numberDiff line change
@@ -259,7 +259,7 @@
259259
}
260260
if (isHtmlElement(el, FORM)) {
261261
if (!modifiers.includes("use-browser")) {
262-
el.setAttribute("novalidate", true);
262+
setAttr(el, "novalidate", "true");
263263
}
264264
if (modifiers.includes("validate-on-submit")) {
265265
el.addEventListener("submit", function(e) {
@@ -304,7 +304,7 @@
304304
});
305305
function toggleError(field, valid) {
306306
const parentNode = getData(field).parentNode;
307-
const errorMsgNode = getErrorMsgFromId(field);
307+
const errorMsgNode = document.getElementById(getAttr(field, "aria-errormessage"));
308308
setAttr(field, "aria-invalid", !valid);
309309
if (valid) {
310310
setAttr(errorMsgNode, HIDDEN);
@@ -324,17 +324,13 @@
324324
}
325325
return false;
326326
}
327-
function getErrorMsgFromId(field) {
328-
const id = getAttr(field, "id");
329-
return document.getElementById(`${ERROR_MSG_CLASS}-${id}`);
330-
}
331327
function addErrorMsg(field) {
332328
const fieldData = getData(field);
333329
const targetNode = includes(fieldData.mods, GROUP) ? fieldData.parentNode : field;
334330
const span = document.createElement("span");
335331
span.className = ERROR_MSG_CLASS;
336-
const errorMsgNode = getErrorMsgFromId(field) || findSiblingErrorMsgNode(targetNode) || span;
337-
const id = getMakeId(field);
332+
const errorMsgNode = document.getElementById(`${ERROR_MSG_CLASS}-${getAttr(targetNode, "id")}`) || findSiblingErrorMsgNode(targetNode) || span;
333+
const id = getMakeId(targetNode);
338334
const errorMsgId = `${ERROR_MSG_CLASS}-${id}`;
339335
if (getAttr(errorMsgNode, "id") !== errorMsgId) {
340336
setAttr(errorMsgNode, "id", errorMsgId);

‎src/index.js

+8-11
Original file line numberDiff line numberDiff line change
@@ -466,7 +466,7 @@ const Plugin = function (Alpine) {
466466

467467
// disable in-browser validation
468468
if (!modifiers.includes("use-browser")) {
469-
el.setAttribute("novalidate", true);
469+
setAttr(el, "novalidate", "true");
470470
}
471471

472472
if (modifiers.includes("validate-on-submit")) {
@@ -565,7 +565,9 @@ const Plugin = function (Alpine) {
565565
function toggleError(field, valid) {
566566
const parentNode = getData(field).parentNode;
567567

568-
const errorMsgNode = getErrorMsgFromId(field);
568+
const errorMsgNode = document.getElementById(
569+
getAttr(field, "aria-errormessage")
570+
);
569571

570572
/* ---------------------------- Set aria-invalid ---------------------------- */
571573
setAttr(field, "aria-invalid", !valid);
@@ -601,13 +603,6 @@ const Plugin = function (Alpine) {
601603
return false;
602604
}
603605

604-
/* -------------- Helper function to get error msg node from id ------------- */
605-
606-
function getErrorMsgFromId(field) {
607-
const id = getAttr(field, "id");
608-
return document.getElementById(`${ERROR_MSG_CLASS}-${id}`);
609-
}
610-
611606
/* ------ Function to setup errorMsgNode by finding it or creating one ------ */
612607

613608
function addErrorMsg(field) {
@@ -628,12 +623,14 @@ const Plugin = function (Alpine) {
628623
// If there already is an error-msg with the proper id in the form than use that; else find sibling error msg with error-msg class; else use generated span.
629624

630625
const errorMsgNode =
631-
getErrorMsgFromId(field) ||
626+
document.getElementById(
627+
`${ERROR_MSG_CLASS}-${getAttr(targetNode, "id")}`
628+
) ||
632629
findSiblingErrorMsgNode(targetNode) ||
633630
span;
634631

635632
// get field id or make one if it doesn't exist
636-
const id = getMakeId(field);
633+
const id = getMakeId(targetNode);
637634

638635
// set error msg id
639636
const errorMsgId = `${ERROR_MSG_CLASS}-${id}`;

0 commit comments

Comments
 (0)