Skip to content

Commit 78d6afb

Browse files
colinautcolinaut
committed
feat: add novalidate to form tag
1 parent d06c068 commit 78d6afb

8 files changed

+999
-687
lines changed

‎.prettierrc

+4-3
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
{
2-
"tabWidth": 4,
3-
"useTabs": true
4-
}
2+
"tabWidth": 4,
3+
"useTabs": true,
4+
"maxLength": 120
5+
}

‎README.md

+1
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@ Version 1.7 adds x-required directive for toggling if the field is required.
1717
* 1.7.3: fix for x-validate mods on multiple forms on the same page; date defaults to yyyy-mm-dd format; and code clean up.
1818
* 1.7.6: fix where it breaks when fields are missing name or id attributes. Now it skips these.
1919
* 1.7.12: normal form reset replaces formData with new empty values
20+
* 1.7.14: x-validate adds `novalidate` on form tag to the browser's validation doesn't interfere with the plugin's validation
2021

2122
## Simple Usage
2223

‎dist/alpine.validate.cjs.js

+16-11
Original file line numberDiff line numberDiff line change
@@ -83,7 +83,13 @@ var Plugin = function(Alpine) {
8383
formData.set(form, Alpine.reactive({}));
8484
}
8585
let tempData = formData.get(form);
86-
data = { ...tempData[name], name, node: field, value: field.value, ...data };
86+
data = {
87+
...tempData[name],
88+
name,
89+
node: field,
90+
value: field.value,
91+
...data
92+
};
8793
data.required = data.required || includes(data.mods, REQUIRED) || includes(data.mods, GROUP) || field.hasAttribute(REQUIRED);
8894
const value = data.value;
8995
let valid = field.checkValidity();
@@ -178,9 +184,7 @@ var Plugin = function(Alpine) {
178184
Alpine.directive(REQUIRED, (el, {
179185
value,
180186
expression
181-
}, {
182-
evaluate
183-
}) => {
187+
}, { evaluate }) => {
184188
if (expression) {
185189
Alpine.effect(() => {
186190
var _a;
@@ -192,16 +196,16 @@ var Plugin = function(Alpine) {
192196
});
193197
}
194198
});
195-
Alpine.directive(PLUGIN_NAME, (el, {
196-
modifiers,
197-
expression
198-
}, {
199-
evaluate
200-
}) => {
199+
Alpine.directive(PLUGIN_NAME, (el, { modifiers, expression }, { evaluate }) => {
201200
const form = getForm(el);
202201
const defaultData = (field) => {
203202
const parentNode = field.closest(".field-parent") || includes(modifiers, GROUP) ? field.parentNode.parentNode : field.parentNode;
204-
return { mods: [...modifiers, field.type], set: field.closest(FIELDSET), parentNode, exp: expression && evaluate(expression) };
203+
return {
204+
mods: [...modifiers, field.type],
205+
set: field.closest(FIELDSET),
206+
parentNode,
207+
exp: expression && evaluate(expression)
208+
};
205209
};
206210
function addEvents(field) {
207211
addErrorMsg(field);
@@ -212,6 +216,7 @@ var Plugin = function(Alpine) {
212216
addEvent(field, INPUT, checkIfValid);
213217
}
214218
if (isHtmlElement(el, FORM)) {
219+
el.setAttribute("novalidate", true);
215220
formModifiers.set(form, modifiers);
216221
const fields = el.querySelectorAll(FIELD_SELECTOR);
217222
addEvent(el, "reset", () => {

‎dist/alpine.validate.esm.js

+16-11
Original file line numberDiff line numberDiff line change
@@ -70,7 +70,13 @@ var Plugin = function(Alpine) {
7070
formData.set(form, Alpine.reactive({}));
7171
}
7272
let tempData = formData.get(form);
73-
data = { ...tempData[name], name, node: field, value: field.value, ...data };
73+
data = {
74+
...tempData[name],
75+
name,
76+
node: field,
77+
value: field.value,
78+
...data
79+
};
7480
data.required = data.required || includes(data.mods, REQUIRED) || includes(data.mods, GROUP) || field.hasAttribute(REQUIRED);
7581
const value = data.value;
7682
let valid = field.checkValidity();
@@ -165,9 +171,7 @@ var Plugin = function(Alpine) {
165171
Alpine.directive(REQUIRED, (el, {
166172
value,
167173
expression
168-
}, {
169-
evaluate
170-
}) => {
174+
}, { evaluate }) => {
171175
if (expression) {
172176
Alpine.effect(() => {
173177
var _a;
@@ -179,16 +183,16 @@ var Plugin = function(Alpine) {
179183
});
180184
}
181185
});
182-
Alpine.directive(PLUGIN_NAME, (el, {
183-
modifiers,
184-
expression
185-
}, {
186-
evaluate
187-
}) => {
186+
Alpine.directive(PLUGIN_NAME, (el, { modifiers, expression }, { evaluate }) => {
188187
const form = getForm(el);
189188
const defaultData = (field) => {
190189
const parentNode = field.closest(".field-parent") || includes(modifiers, GROUP) ? field.parentNode.parentNode : field.parentNode;
191-
return { mods: [...modifiers, field.type], set: field.closest(FIELDSET), parentNode, exp: expression && evaluate(expression) };
190+
return {
191+
mods: [...modifiers, field.type],
192+
set: field.closest(FIELDSET),
193+
parentNode,
194+
exp: expression && evaluate(expression)
195+
};
192196
};
193197
function addEvents(field) {
194198
addErrorMsg(field);
@@ -199,6 +203,7 @@ var Plugin = function(Alpine) {
199203
addEvent(field, INPUT, checkIfValid);
200204
}
201205
if (isHtmlElement(el, FORM)) {
206+
el.setAttribute("novalidate", true);
202207
formModifiers.set(form, modifiers);
203208
const fields = el.querySelectorAll(FIELD_SELECTOR);
204209
addEvent(el, "reset", () => {

‎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

+16-11
Original file line numberDiff line numberDiff line change
@@ -71,7 +71,13 @@
7171
formData.set(form, Alpine.reactive({}));
7272
}
7373
let tempData = formData.get(form);
74-
data = { ...tempData[name], name, node: field, value: field.value, ...data };
74+
data = {
75+
...tempData[name],
76+
name,
77+
node: field,
78+
value: field.value,
79+
...data
80+
};
7581
data.required = data.required || includes(data.mods, REQUIRED) || includes(data.mods, GROUP) || field.hasAttribute(REQUIRED);
7682
const value = data.value;
7783
let valid = field.checkValidity();
@@ -166,9 +172,7 @@
166172
Alpine.directive(REQUIRED, (el, {
167173
value,
168174
expression
169-
}, {
170-
evaluate
171-
}) => {
175+
}, { evaluate }) => {
172176
if (expression) {
173177
Alpine.effect(() => {
174178
var _a;
@@ -180,16 +184,16 @@
180184
});
181185
}
182186
});
183-
Alpine.directive(PLUGIN_NAME, (el, {
184-
modifiers,
185-
expression
186-
}, {
187-
evaluate
188-
}) => {
187+
Alpine.directive(PLUGIN_NAME, (el, { modifiers, expression }, { evaluate }) => {
189188
const form = getForm(el);
190189
const defaultData = (field) => {
191190
const parentNode = field.closest(".field-parent") || includes(modifiers, GROUP) ? field.parentNode.parentNode : field.parentNode;
192-
return { mods: [...modifiers, field.type], set: field.closest(FIELDSET), parentNode, exp: expression && evaluate(expression) };
191+
return {
192+
mods: [...modifiers, field.type],
193+
set: field.closest(FIELDSET),
194+
parentNode,
195+
exp: expression && evaluate(expression)
196+
};
193197
};
194198
function addEvents(field) {
195199
addErrorMsg(field);
@@ -200,6 +204,7 @@
200204
addEvent(field, INPUT, checkIfValid);
201205
}
202206
if (isHtmlElement(el, FORM)) {
207+
el.setAttribute("novalidate", true);
203208
formModifiers.set(form, modifiers);
204209
const fields = el.querySelectorAll(FIELD_SELECTOR);
205210
addEvent(el, "reset", () => {

0 commit comments

Comments
 (0)