diff --git a/src/pat/validation/documentation.md b/src/pat/validation/documentation.md
index 394e82c65..a3dc74fdd 100644
--- a/src/pat/validation/documentation.md
+++ b/src/pat/validation/documentation.md
@@ -1,7 +1,9 @@
## Description
-This pattern provides form validation based on the HTML standard and offers extended functionality like custom error messages and extra validation rules.
-
+This pattern provides form validation with standard HTML validation attributes,
+extra validation rules, custom error messages and a custom error template. It
+is based HTML form validation framework and therefor supports form state
+checking via CSS peudo classes like `:valid` and `:invalid`.
## Documentation
@@ -10,13 +12,23 @@ The rest is handled mostly with standard HTML validation attributes.
This patterns offers:
-- extra validation rules like checking for equality or checking is one date it after another.
-- custom error messages.
+- Custom error messages for the standard HTML validation attributes.
+- Custom error template to display error messages.
+- Extra validation rules where the standard HTML validation attributes are not enough.
+
+These extra validation rules are:
+
+- Equality checking between two fields (e.g. password confirmation).
+- Date and datetime validation for before and after a given date or another input field.
-Since it is based on the HTML standard you can still use the `:valid`, `:invalid` and `:out-of-range` CSS pseudo classes.
-You can use any HTML form validation attributes but here are some examples:
+### HTML form validation framework integration.
+This pattern uses the [JavaScript Constraint Validation API](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Constraint_validation).
+Valid formns or inputs can be selected with the `:valid` pseudo class, invalid ones with the `:invalid` pseudo class.
+
+
+### Validation rules
| Name | Syntax | Description |
| ------------- | -------------------------- | ------------------------------------------------------------ |
@@ -31,64 +43,94 @@ You can use any HTML form validation attributes but here are some examples:
> **_NOTE:_** The form inputs must have a `name` attribute, otherwise the validation would not happen.
-### Error messages
+### Custom error messages
-Error messages are inserted into the DOM as `em` elements with a `message warning` class.
-For most input elements error messages are inserted immediately after the input element.
-In addition both the input element and its label will get an `warning` class.
+Error messages are unique per type of validation (e.g. `required`, `email` or `number`) and can be overridden:
-
+```html
+
+```
-Checkboxes and radio buttons are treated differently: if they are contained in a fieldset with class `checklist` error messages are added at the end of the fieldset.
+Error messages can also be overridden on a per-field basis, for example:
-
+```html
+
+```
-#### Overriding error messages
+For a list of all available error messages see the [Options reference](#options-reference).
-Error messages are unique per type of validation (e.g. `required`, `email` or `number`) and can be overridden:
-
+```html
+
+```
-Error messages can also be overridden on a per-field basis, for example:
+Checkboxes and radio buttons are treated differently: if they are contained in a fieldset with class `checklist` error messages are added at the end of the fieldset.
+
+```html
+
+```
-
+The error message template is be overridden via JavaScript by customizing the error_template method of the Pattern API.
+This is an [example taken from Mockup](https://github.com/plone/mockup/blob/6c93b810b2c07b5bd58eec80cd03f700c9447d8c/src/patterns.js#L67):
+
+```javascript
+import { Pattern as ValidationPattern } from "@patternslib/patternslib/src/pat/validation/validation";
+
+ValidationPattern.prototype.error_template = (message) =>
+ `${message}`;
+```
### Options reference
-> **_NOTE:_** The form inputs must have a `name` attribute, otherwise the validation would not happen.
+> **_NOTE:_** The form inputs must have a `name` attribute, otherwise the
+> validation would not happen.
-> **_NOTE:_** If you need to exclude a submit button from form validation - like a cancel button which actually submits - add the `formnovalidate` attribute to the button.
+> **_NOTE:_** If you need to exclude a submit button from form validation -
+> like a cancel button which actually submits - add the `formnovalidate`
+> attribute to the button.
| Property | Description | Default | Type |
| ---------------- | -------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------- | -------------------------------------- |
| disable-selector | A selector for elements that should be disabled when there are errors in the form. | | CSS Selector |
-| equality | Field-specific. The name of another input this input should equal to (useful for password confirmation). | | String |
| message-date | The error message for date fields. | This value must be a valid date | String |
| message-datetime | The error message for datetime fields. | This value must be a valid date and time | String |
| message-email | The error message for email fields. | This value must be a valid email address | String |
-| message-equality | The error message for fields required to be equal | is not equal to %{attribute} | String |
-| message-max | The error message for max number values. | This value must be less than or equal to %{count} | String |
-| message-min | The error message for min number values. | This value must be greater than or equal to %{count} | String |
+| message-max | The error message for number values which are higher than max. | This value must be less than or equal to %{count} | String |
+| message-min | The error message for number values which are lower than min. | This value must be greater than or equal to %{count} | String |
| message-number | The error message for numbers. | This value must be a number. | String |
| message-required | The error message for required fields. | This field is required. | String |
-| not-after | Field-specific. A lower time limit restriction for date and datetime fields. | | CSS Selector or a ISO8601 date string. |
-| not-before | Field-specific. An upper time limit restriction for date and datetime fields. | | CSS Selector or a ISO8601 date string. |
+| message-equality | The error message for fields required to be equal | is not equal to %{attribute} | String |
+| equality | Field-specific extra rule. The name of another input this input should equal to (useful for password confirmation). | | String |
+| not-after | Field-specific extra rule. A lower time limit restriction for date and datetime fields. | | CSS Selector or a ISO8601 date string. |
+| not-before | Field-specific extra rule. An upper time limit restriction for date and datetime fields. | | CSS Selector or a ISO8601 date string. |
+| delay | Time in milliseconds before validation starts to avoid validating while typing. | 100 | Integer |
diff --git a/src/pat/validation/validation.js b/src/pat/validation/validation.js
index 53421d41d..2070a7652 100644
--- a/src/pat/validation/validation.js
+++ b/src/pat/validation/validation.js
@@ -10,27 +10,25 @@ import utils from "../../core/utils";
import registry from "../../core/registry";
const logger = logging.getLogger("pat-validation");
-//logger.setLevel(logging.Level.DEBUG);
+
export const parser = new Parser("validation");
parser.addArgument("disable-selector", "[type=submit], button:not([type=button])"); // Elements which must be disabled if there are errors
-parser.addArgument("message-date", ""); // "This value must be a valid date");
-parser.addArgument("message-datetime", ""); // "This value must be a valid date and time");
-parser.addArgument("message-email", ""); // "This value must be a valid email address");
-parser.addArgument("message-max", ""); // "This value must be less than or equal to %{count}");
-parser.addArgument("message-min", ""); // "This value must be greater than or equal to %{count}"); // prettier-ignore
-parser.addArgument("message-number", ""); // "This value must be a number");
-parser.addArgument("message-required", ""); // "This field is required");
+parser.addArgument("message-date", ""); // "This value must be a valid date"
+parser.addArgument("message-datetime", ""); // "This value must be a valid date and time"
+parser.addArgument("message-email", ""); // "This value must be a valid email address"
+parser.addArgument("message-max", ""); // "This value must be less than or equal to %{count}"
+parser.addArgument("message-min", ""); // "This value must be greater than or equal to %{count}"
+parser.addArgument("message-number", ""); // "This value must be a number"
+parser.addArgument("message-required", ""); // "This field is required"
parser.addArgument("message-equality", "is not equal to %{attribute}.");
parser.addArgument("not-after", null);
parser.addArgument("not-before", null);
parser.addArgument("equality", null);
parser.addArgument("delay", 100); // Delay before validation is done to avoid validating while typing.
-// BBB
-// TODO: deprecated. Will be removed with next major version.
+// Aliases
parser.addAlias("message-integer", "message-number");
-parser.addArgument("error-template");
const KEY_ERROR_EL = "__patternslib__input__error__el";
const KEY_ERROR_MSG = "__patternslib__input__error__msg";
@@ -121,19 +119,7 @@ class Pattern extends BasePattern {
return;
}
- logger.debug(`
- validity_state.badInput ${validity_state.badInput}
- validity_state.customError ${validity_state.customError}
- validity_state.patternMismatch ${validity_state.patternMismatch}
- validity_state.rangeOverflow ${validity_state.rangeOverflow}
- validity_state.rangeUnderflow ${validity_state.rangeUnderflow}
- validity_state.stepMismatch ${validity_state.stepMismatch}
- validity_state.tooLong ${validity_state.tooLong}
- validity_state.tooShort ${validity_state.tooShort}
- validity_state.typeMismatch ${validity_state.typeMismatch}
- validity_state.valid ${validity_state.valid}
- validity_state.valueMissing ${validity_state.valueMissing}
- `);
+ logger.debug(`validity_state: `, validity_state);
const input_options = parser.parse(input);
diff --git a/src/pat/validation/validation.test.js b/src/pat/validation/validation.test.js
index b50f5e15c..f9a0eaa62 100644
--- a/src/pat/validation/validation.test.js
+++ b/src/pat/validation/validation.test.js
@@ -18,1481 +18,1495 @@ describe("pat-validation", function () {
parser.parameters.delay.value = orig_delay;
});
- it("1.1 - validates with no constraints", async function () {
- document.body.innerHTML = `
-
- `;
- const el = document.querySelector(".pat-validation");
- const inp = el.querySelector("[name=name]");
-
- const instance = new Pattern(el);
- await events.await_pattern_init(instance);
-
- inp.dispatchEvent(events.change_event());
- await utils.timeout(1); // wait a tick for async to settle.
-
- expect(el.querySelectorAll("em.warning").length).toBe(0);
- });
+ describe("1 - general tests", function () {
+ it("1.1 - validates with no constraints", async function () {
+ document.body.innerHTML = `
+
+ `;
+ const el = document.querySelector(".pat-validation");
+ const inp = el.querySelector("[name=name]");
+
+ const instance = new Pattern(el);
+ await events.await_pattern_init(instance);
+
+ inp.dispatchEvent(events.change_event());
+ await utils.timeout(1); // wait a tick for async to settle.
+
+ expect(el.querySelectorAll("em.warning").length).toBe(0);
+ });
- it("1.2 - adds an error when validation fails", async function () {
- document.body.innerHTML = `
-
- `;
- const el = document.querySelector(".pat-validation");
- const inp = el.querySelector("[name=name]");
+ it("1.2 - adds an error when validation fails", async function () {
+ document.body.innerHTML = `
+
+ `;
+ const el = document.querySelector(".pat-validation");
+ const inp = el.querySelector("[name=name]");
- const instance = new Pattern(el);
- await events.await_pattern_init(instance);
+ const instance = new Pattern(el);
+ await events.await_pattern_init(instance);
- inp.value = "";
- inp.dispatchEvent(events.change_event());
- await utils.timeout(1); // wait a tick for async to settle.
+ inp.value = "";
+ inp.dispatchEvent(events.change_event());
+ await utils.timeout(1); // wait a tick for async to settle.
- expect(el.querySelectorAll("em.warning").length).toBe(1);
- });
+ expect(el.querySelectorAll("em.warning").length).toBe(1);
+ });
- it("1.3 - removes the error when the field becomes valid.", async function () {
- document.body.innerHTML = `
-
- `;
- const el = document.querySelector(".pat-validation");
- const inp = el.querySelector("[name=name]");
+ it("1.3 - removes the error when the field becomes valid.", async function () {
+ document.body.innerHTML = `
+
+ `;
+ const el = document.querySelector(".pat-validation");
+ const inp = el.querySelector("[name=name]");
- const instance = new Pattern(el);
- await events.await_pattern_init(instance);
+ const instance = new Pattern(el);
+ await events.await_pattern_init(instance);
- inp.value = "";
- inp.dispatchEvent(events.change_event());
- await utils.timeout(1); // wait a tick for async to settle.
+ inp.value = "";
+ inp.dispatchEvent(events.change_event());
+ await utils.timeout(1); // wait a tick for async to settle.
- expect(el.querySelectorAll("em.warning").length).toBe(1);
+ expect(el.querySelectorAll("em.warning").length).toBe(1);
- inp.value = "abc";
- inp.dispatchEvent(events.change_event());
- await utils.timeout(1); // wait a tick for async to settle.
+ inp.value = "abc";
+ inp.dispatchEvent(events.change_event());
+ await utils.timeout(1); // wait a tick for async to settle.
- expect(el.querySelectorAll("em.warning").length).toBe(0);
- });
+ expect(el.querySelectorAll("em.warning").length).toBe(0);
+ });
- it("1.4 - multiple error messages on multiple errors.", async function () {
- document.body.innerHTML = `
-
- `;
- const el = document.querySelector(".pat-validation");
- const inp1 = el.querySelector("[name=name1]");
- const inp2 = el.querySelector("[name=name2]");
-
- const instance = new Pattern(el);
- await events.await_pattern_init(instance);
-
- inp1.value = "";
- inp1.dispatchEvent(events.change_event());
- inp2.value = "";
- inp2.dispatchEvent(events.change_event());
- await utils.timeout(1); // wait a tick for async to settle.
-
- expect(el.querySelectorAll("em.warning").length).toBe(2);
- });
+ it("1.4 - multiple error messages on multiple errors.", async function () {
+ document.body.innerHTML = `
+
+ `;
+ const el = document.querySelector(".pat-validation");
+ const inp1 = el.querySelector("[name=name1]");
+ const inp2 = el.querySelector("[name=name2]");
+
+ const instance = new Pattern(el);
+ await events.await_pattern_init(instance);
+
+ inp1.value = "";
+ inp1.dispatchEvent(events.change_event());
+ inp2.value = "";
+ inp2.dispatchEvent(events.change_event());
+ await utils.timeout(1); // wait a tick for async to settle.
+
+ expect(el.querySelectorAll("em.warning").length).toBe(2);
+ });
- it("1.5 - removes one error message but keeps the other", async function () {
- document.body.innerHTML = `
-
- `;
- const el = document.querySelector(".pat-validation");
- const inp1 = el.querySelector("[name=name1]");
- const inp2 = el.querySelector("[name=name2]");
-
- const instance = new Pattern(el);
- await events.await_pattern_init(instance);
-
- inp1.value = "";
- inp1.dispatchEvent(events.change_event());
- inp2.value = "";
- inp2.dispatchEvent(events.change_event());
- await utils.timeout(1); // wait a tick for async to settle.
- expect(el.querySelectorAll("em.warning").length).toBe(2);
-
- inp2.value = "abc";
- inp2.dispatchEvent(events.change_event());
- await utils.timeout(1); // wait a tick for async to settle.
- expect(el.querySelectorAll("em.warning").length).toBe(1);
-
- inp1.value = "abc";
- inp1.dispatchEvent(events.change_event());
- await utils.timeout(1); // wait a tick for async to settle.
- expect(el.querySelectorAll("em.warning").length).toBe(0);
- });
+ it("1.5 - removes one error message but keeps the other", async function () {
+ document.body.innerHTML = `
+
+ `;
+ const el = document.querySelector(".pat-validation");
+ const inp1 = el.querySelector("[name=name1]");
+ const inp2 = el.querySelector("[name=name2]");
+
+ const instance = new Pattern(el);
+ await events.await_pattern_init(instance);
+
+ inp1.value = "";
+ inp1.dispatchEvent(events.change_event());
+ inp2.value = "";
+ inp2.dispatchEvent(events.change_event());
+ await utils.timeout(1); // wait a tick for async to settle.
+ expect(el.querySelectorAll("em.warning").length).toBe(2);
+
+ inp2.value = "abc";
+ inp2.dispatchEvent(events.change_event());
+ await utils.timeout(1); // wait a tick for async to settle.
+ expect(el.querySelectorAll("em.warning").length).toBe(1);
+
+ inp1.value = "abc";
+ inp1.dispatchEvent(events.change_event());
+ await utils.timeout(1); // wait a tick for async to settle.
+ expect(el.querySelectorAll("em.warning").length).toBe(0);
+ });
- it("1.6 - can use a globally configured error message and overwrite on a per field basis.", async function () {
- document.body.innerHTML = `
-
- `;
- const el = document.querySelector(".pat-validation");
- const inp1 = el.querySelector("[name=name1]");
- const inp2 = el.querySelector("[name=name2]");
-
- const instance = new Pattern(el);
- await events.await_pattern_init(instance);
-
- inp1.value = "";
- inp1.dispatchEvent(events.change_event());
- inp2.value = "";
- inp2.dispatchEvent(events.change_event());
- await utils.timeout(1); // wait a tick for async to settle.
- expect(el.querySelectorAll("em.warning").length).toBe(2);
- expect(el.querySelectorAll("em.warning")[0].textContent).toBe("need this 1");
- expect(el.querySelectorAll("em.warning")[1].textContent).toBe("need this 2");
- });
+ it("1.6 - can use a globally configured error message and overwrite on a per field basis.", async function () {
+ document.body.innerHTML = `
+
+ `;
+ const el = document.querySelector(".pat-validation");
+ const inp1 = el.querySelector("[name=name1]");
+ const inp2 = el.querySelector("[name=name2]");
+
+ const instance = new Pattern(el);
+ await events.await_pattern_init(instance);
+
+ inp1.value = "";
+ inp1.dispatchEvent(events.change_event());
+ inp2.value = "";
+ inp2.dispatchEvent(events.change_event());
+ await utils.timeout(1); // wait a tick for async to settle.
+ expect(el.querySelectorAll("em.warning").length).toBe(2);
+ expect(el.querySelectorAll("em.warning")[0].textContent).toBe("need this 1");
+ expect(el.querySelectorAll("em.warning")[1].textContent).toBe("need this 2");
+ });
- it("1.7 - doesn't validate disabled elements", async function () {
- document.body.innerHTML = `
-
- `;
+ it("1.7 - doesn't validate disabled elements", async function () {
+ document.body.innerHTML = `
+
+ `;
- const el = document.querySelector(".pat-validation");
- const inp = el.querySelector("[name=input]");
+ const el = document.querySelector(".pat-validation");
+ const inp = el.querySelector("[name=input]");
- const instance = new Pattern(el);
- await events.await_pattern_init(instance);
+ const instance = new Pattern(el);
+ await events.await_pattern_init(instance);
- inp.value = "";
- inp.dispatchEvent(events.change_event());
- await utils.timeout(1); // wait a tick for async to settle.
+ inp.value = "";
+ inp.dispatchEvent(events.change_event());
+ await utils.timeout(1); // wait a tick for async to settle.
- expect(el.querySelectorAll("em.warning").length).toBe(0);
- });
+ expect(el.querySelectorAll("em.warning").length).toBe(0);
+ });
- it("1.8 - can disable certain form elements when validation fails", async function () {
- // Tests the disable-selector argument
- document.body.innerHTML = `
-
- `;
-
- const el = document.querySelector(".pat-validation");
- const inp = el.querySelector("[name=input]");
-
- const instance = new Pattern(el);
- await events.await_pattern_init(instance);
-
- inp.value = 4.5;
- inp.dispatchEvent(events.change_event());
- await utils.timeout(1); // wait a tick for async to settle.
- expect(el.querySelectorAll("em.warning").length).toBe(1);
- expect(el.querySelectorAll("em.warning")[0].textContent).toBe(
- "This value must be an integer."
- );
- expect(el.querySelector("#form-buttons-create").disabled).toBe(true);
-
- inp.value = 5;
- inp.dispatchEvent(events.change_event());
- await utils.timeout(1); // wait a tick for async to settle.
- expect(el.querySelectorAll("em.warning").length).toBe(0);
- expect(el.querySelector("#form-buttons-create").disabled).toBe(false);
- });
+ it("1.8 - can disable certain form elements when validation fails", async function () {
+ // Tests the disable-selector argument
+ document.body.innerHTML = `
+
+ `;
+
+ const el = document.querySelector(".pat-validation");
+ const inp = el.querySelector("[name=input]");
+
+ const instance = new Pattern(el);
+ await events.await_pattern_init(instance);
+
+ inp.value = 4.5;
+ inp.dispatchEvent(events.change_event());
+ await utils.timeout(1); // wait a tick for async to settle.
+ expect(el.querySelectorAll("em.warning").length).toBe(1);
+ expect(el.querySelectorAll("em.warning")[0].textContent).toBe(
+ "This value must be an integer."
+ );
+ expect(el.querySelector("#form-buttons-create").disabled).toBe(true);
+
+ inp.value = 5;
+ inp.dispatchEvent(events.change_event());
+ await utils.timeout(1); // wait a tick for async to settle.
+ expect(el.querySelectorAll("em.warning").length).toBe(0);
+ expect(el.querySelector("#form-buttons-create").disabled).toBe(false);
+ });
- it("1.9 - can define a custom error message template by subclassing.", async function () {
- class CustomValidation extends Pattern {
- error_template(message) {
- return `
${message}
`;
+ it("1.9 - can define a custom error message template by subclassing.", async function () {
+ class CustomValidation extends Pattern {
+ error_template(message) {
+ return `
${message}
`;
+ }
}
- }
-
- document.body.innerHTML = `
-
- `;
- const el = document.querySelector(".pat-validation");
- const inp = el.querySelector("[name=name]");
-
- const instance = new CustomValidation(el);
- await events.await_pattern_init(instance);
-
- inp.value = "";
- inp.dispatchEvent(events.change_event());
- await utils.timeout(1); // wait a tick for async to settle.
- expect(el.querySelectorAll("div.validation-error").length).toBe(1);
- expect(el.querySelectorAll("div.validation-error")[0].textContent).toBe(
- "need this"
- );
- });
- it("1.10 - Adds a novalidate attribute to not show the browsers validation bubbles.", async function () {
- // See: https://developer.mozilla.org/en-US/docs/Learn/Forms/Form_validation#a_more_detailed_example
- // The ``novalidate`` attribute does not deactivate the validation API
- // but prevents the browser from showing validation messages by itself.
- document.body.innerHTML = `
-
- `;
- const el = document.querySelector(".pat-validation");
- const instance = new Pattern(el);
- await events.await_pattern_init(instance);
-
- expect(el.hasAttribute("novalidate")).toBe(true);
- });
+ document.body.innerHTML = `
+
+ `;
+ const el = document.querySelector(".pat-validation");
+ const inp = el.querySelector("[name=name]");
+
+ const instance = new CustomValidation(el);
+ await events.await_pattern_init(instance);
+
+ inp.value = "";
+ inp.dispatchEvent(events.change_event());
+ await utils.timeout(1); // wait a tick for async to settle.
+ expect(el.querySelectorAll("div.validation-error").length).toBe(1);
+ expect(el.querySelectorAll("div.validation-error")[0].textContent).toBe(
+ "need this"
+ );
+ });
- it("1.11 - Prevents submit when invalid.", async function () {
- document.body.innerHTML = `
-
- `;
- const el = document.querySelector(".pat-validation");
- const instance = new Pattern(el);
- await events.await_pattern_init(instance);
-
- el.querySelector("button").click();
- await utils.timeout(1); // wait a tick for async to settle.
-
- expect(el.querySelectorAll("em.warning").length).toBe(1);
- });
+ it("1.10 - Adds a novalidate attribute to not show the browsers validation bubbles.", async function () {
+ // See: https://developer.mozilla.org/en-US/docs/Learn/Forms/Form_validation#a_more_detailed_example
+ // The ``novalidate`` attribute does not deactivate the validation API
+ // but prevents the browser from showing validation messages by itself.
+ document.body.innerHTML = `
+
+ `;
+ const el = document.querySelector(".pat-validation");
+ const instance = new Pattern(el);
+ await events.await_pattern_init(instance);
+
+ expect(el.hasAttribute("novalidate")).toBe(true);
+ });
- it("1.12 - Allows submit with ``formnovalidate``.", async function () {
- // Buttons with ``formnovalidate`` should prevent validation.
+ it("1.11 - Prevents submit when invalid.", async function () {
+ document.body.innerHTML = `
+
+ `;
+ const el = document.querySelector(".pat-validation");
+ const instance = new Pattern(el);
+ await events.await_pattern_init(instance);
+
+ el.querySelector("button").click();
+ await utils.timeout(1); // wait a tick for async to settle.
+
+ expect(el.querySelectorAll("em.warning").length).toBe(1);
+ });
- document.body.innerHTML = `
-
- `;
- const el = document.querySelector(".pat-validation");
- const instance = new Pattern(el);
- await events.await_pattern_init(instance);
+ it("1.12 - Allows submit with ``formnovalidate``.", async function () {
+ // Buttons with ``formnovalidate`` should prevent validation.
- el.querySelector("button").click();
- await utils.timeout(1); // wait a tick for async to settle.
+ document.body.innerHTML = `
+
+ `;
+ const el = document.querySelector(".pat-validation");
+ const instance = new Pattern(el);
+ await events.await_pattern_init(instance);
- expect(el.querySelectorAll("em.warning").length).toBe(0);
- });
+ el.querySelector("button").click();
+ await utils.timeout(1); // wait a tick for async to settle.
- it("1.13 - Prevents other event handlers when invalid.", async function () {
- document.body.innerHTML = `
-
- `;
- const el = document.querySelector(".pat-validation");
- const instance = new Pattern(el);
- await events.await_pattern_init(instance);
-
- let submit_called = false;
- let click_called = false;
-
- // Note: the handlers must be registered after Pattern initialization.
- // Otherwise the pattern will not be able to prevent the event.
- // In case of other patterns, the validation pattern will be reordered
- // first and submit prevention does work.
- el.addEventListener("submit", () => (submit_called = true));
- el.addEventListener("click", () => (click_called = true));
-
- el.querySelector("button").click();
- await utils.timeout(1); // wait a tick for async to settle.
-
- expect(el.querySelectorAll("em.warning").length).toBe(1);
- expect(submit_called).toBe(false);
- expect(click_called).toBe(true);
- });
+ expect(el.querySelectorAll("em.warning").length).toBe(0);
+ });
- it("1.14 - Prevents pat-inject form submission when invalid.", async function () {
- const pat_inject = (await import("../inject/inject")).default;
- const registry = (await import("../../core/registry")).default;
+ it("1.13 - Prevents other event handlers when invalid.", async function () {
+ document.body.innerHTML = `
+
+ `;
+ const el = document.querySelector(".pat-validation");
+ const instance = new Pattern(el);
+ await events.await_pattern_init(instance);
+
+ let submit_called = false;
+ let click_called = false;
+
+ // Note: the handlers must be registered after Pattern initialization.
+ // Otherwise the pattern will not be able to prevent the event.
+ // In case of other patterns, the validation pattern will be reordered
+ // first and submit prevention does work.
+ el.addEventListener("submit", () => (submit_called = true));
+ el.addEventListener("click", () => (click_called = true));
+
+ el.querySelector("button").click();
+ await utils.timeout(1); // wait a tick for async to settle.
+
+ expect(el.querySelectorAll("em.warning").length).toBe(1);
+ expect(submit_called).toBe(false);
+ expect(click_called).toBe(true);
+ });
- document.body.innerHTML = `
-
- `;
- const el = document.querySelector(".pat-validation");
+ it("1.14 - Prevents pat-inject form submission when invalid.", async function () {
+ const pat_inject = (await import("../inject/inject")).default;
+ const registry = (await import("../../core/registry")).default;
- const spy_inject_submit = jest.spyOn(pat_inject, "onTrigger");
+ document.body.innerHTML = `
+
+ `;
+ const el = document.querySelector(".pat-validation");
- registry.scan(document.body);
- await utils.timeout(1); // wait a tick for async to settle.
+ const spy_inject_submit = jest.spyOn(pat_inject, "onTrigger");
- el.querySelector("button").click();
- await utils.timeout(1); // wait a tick for async to settle.
+ registry.scan(document.body);
+ await utils.timeout(1); // wait a tick for async to settle.
- expect(el.querySelectorAll("em.warning").length).toBe(1);
- expect(spy_inject_submit).not.toHaveBeenCalled();
- });
+ el.querySelector("button").click();
+ await utils.timeout(1); // wait a tick for async to settle.
- it("1.15 - Prevents pat-modal closing with a pat-inject when invalid.", async function () {
- await import("../close-panel/close-panel");
- const pat_inject = (await import("../inject/inject")).default;
- const pat_modal = (await import("../modal/modal")).default;
- const registry = (await import("../../core/registry")).default;
-
- document.body.innerHTML = `
-