Skip to content

Commit 3f701d2

Browse files
colinautcolinaut
committed
fix: allow [] in name fields
1 parent 8c5017d commit 3f701d2

6 files changed

+114
-15
lines changed

‎dist/alpine.validate.cjs.js

+1-2
Original file line numberDiff line numberDiff line change
@@ -324,8 +324,7 @@ var Plugin = function(Alpine) {
324324
}
325325
function getErrorMsgFromId(field) {
326326
const name = getName(field);
327-
const form = getForm(field);
328-
return form.querySelector(`#${ERROR_MSG_CLASS}-${name}`);
327+
return document.getElementById(`${ERROR_MSG_CLASS}-${name}`);
329328
}
330329
function addErrorMsg(field) {
331330
const name = getName(field);

‎dist/alpine.validate.esm.js

+1-2
Original file line numberDiff line numberDiff line change
@@ -311,8 +311,7 @@ var Plugin = function(Alpine) {
311311
}
312312
function getErrorMsgFromId(field) {
313313
const name = getName(field);
314-
const form = getForm(field);
315-
return form.querySelector(`#${ERROR_MSG_CLASS}-${name}`);
314+
return document.getElementById(`${ERROR_MSG_CLASS}-${name}`);
316315
}
317316
function addErrorMsg(field) {
318317
const name = getName(field);

‎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

+1-2
Original file line numberDiff line numberDiff line change
@@ -312,8 +312,7 @@
312312
}
313313
function getErrorMsgFromId(field) {
314314
const name = getName(field);
315-
const form = getForm(field);
316-
return form.querySelector(`#${ERROR_MSG_CLASS}-${name}`);
315+
return document.getElementById(`${ERROR_MSG_CLASS}-${name}`);
317316
}
318317
function addErrorMsg(field) {
319318
const name = getName(field);

‎examples/test.html

+109
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,109 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>Document</title>
7+
<script defer src="/alpine.validate.js"></script>
8+
<script
9+
defer
10+
src="https://unpkg.com/[email protected]/dist/cdn.min.js"
11+
></script>
12+
<link
13+
href="https://unpkg.com/@csstools/normalize.css"
14+
rel="stylesheet"
15+
/>
16+
<link href="/styles.css" rel="stylesheet" />
17+
<link href="/nav.css" rel="stylesheet" />
18+
</head>
19+
<body>
20+
<!-- FORM 1 -->
21+
<form x-data x-validate @submit="$validate.submit" id="form1">
22+
<div>
23+
<label for="testing">Email</label>
24+
<input type="email" name="testing" required />
25+
<div class="error-msg text-sm mt-2 text-red-600">
26+
E-mailadres is required
27+
</div>
28+
</div>
29+
<button type="submit">send</button>
30+
</form>
31+
<form
32+
x-data
33+
x-validate
34+
@submit="$validate.submit"
35+
x-ref="form"
36+
id="form"
37+
>
38+
<fieldset>
39+
<label for="email-testing">Email</label>
40+
<input type="email" name="email-testing" required />
41+
<div class="error-msg text-sm mt-2 text-blue-600">
42+
E-mailadres is required
43+
</div>
44+
</fieldset>
45+
<fieldset disabled>
46+
<label for="phone">Phone</label>
47+
<input type="tel" name="phone" value="" required />
48+
<div
49+
class="error-msg"
50+
x-text="($validate.value('phone') === '') ? 'field required' : 'valid phone number required' "
51+
>
52+
field required
53+
</div>
54+
</fieldset>
55+
<button type="submit">send</button>
56+
<div
57+
class="form-validation-log"
58+
style="max-width: 30rem; margin: 0 auto"
59+
>
60+
<h3>Validations</h3>
61+
<p>
62+
<small
63+
>List of data from
64+
<code>$validate.data($refs.form)</code></small
65+
>
66+
</p>
67+
<table>
68+
<thead>
69+
<tr>
70+
<th>name</th>
71+
<th>required</th>
72+
<th>value</th>
73+
<th>valid</th>
74+
</tr>
75+
</thead>
76+
<tbody>
77+
<template x-for="v in $validate.data($refs.form)">
78+
<tr>
79+
<td>
80+
<span x-text="v.name"></span
81+
><span
82+
x-text="v.group ? ' (group)' : ''"
83+
></span>
84+
</td>
85+
<td x-text="v.required ? '&#x2713;' : ''"></td>
86+
<td x-text="v.value"></td>
87+
<td x-text="v.valid ? '&#x2713;' : ''"></td>
88+
</tr>
89+
</template>
90+
</tbody>
91+
</table>
92+
<p>
93+
$validate.isComplete:
94+
<b x-text="$validate.isComplete($refs.form)"></b>
95+
</p>
96+
<a
97+
href=""
98+
@click.prevent="console.log($validate.formData($refs.form))"
99+
>console.log($validate.formData($refs.form))</a
100+
>
101+
<a
102+
href=""
103+
@click.prevent="console.log($validate.value($refs.form))"
104+
>console.log($validate.value($refs.form))</a
105+
>
106+
</div>
107+
</form>
108+
</body>
109+
</html>

‎src/index.js

+1-8
Original file line numberDiff line numberDiff line change
@@ -320,12 +320,6 @@ const Plugin = function (Alpine) {
320320
// isComplete works for the form as a whole and fieldsets using either the node itself or the id
321321
validateMagic.isComplete = (el) => {
322322
const data = getData(el);
323-
// console.log(
324-
// "isComplete",
325-
// el.closest(FIELDSET)?.getAttribute("id"),
326-
// el.closest(FIELDSET)?.disabled
327-
// );
328-
// if this is array then data is form or fieldset
329323
return Array.isArray(data)
330324
? !data.some((val) => !val.valid)
331325
: data && data.valid;
@@ -591,8 +585,7 @@ const Plugin = function (Alpine) {
591585

592586
function getErrorMsgFromId(field) {
593587
const name = getName(field);
594-
const form = getForm(field);
595-
return form.querySelector(`#${ERROR_MSG_CLASS}-${name}`);
588+
return document.getElementById(`${ERROR_MSG_CLASS}-${name}`);
596589
}
597590

598591
/* ------ Function to setup errorMsgNode by finding it or creating one ------ */

0 commit comments

Comments
 (0)