From 24398495746425df98799c98d620888176f63c34 Mon Sep 17 00:00:00 2001
From: Isaiah Thomason <47364027+ITenthusiasm@users.noreply.github.com>
Date: Sun, 11 Feb 2024 14:29:11 -0500
Subject: [PATCH] feat: Support Default Error Messages for Observed Forms

This enables developer to remove redundant/repetitive
code from their application. It also empower developers
to have a central, more ergonomic way to use validation
tools like Zod.
---
 TODO.md                                       |   1 +
 docs/form-validity-observer/README.md         |  19 ++-
 docs/form-validity-observer/guides.md         | 145 ++++++++++++++++++
 docs/form-validity-observer/types.md          |   1 +
 packages/core/FormValidityObserver.d.ts       |  20 ++-
 packages/core/FormValidityObserver.js         |  36 +++--
 .../__tests__/FormValidityObserver.test.ts    | 102 +++++++++++-
 7 files changed, 297 insertions(+), 27 deletions(-)

diff --git a/TODO.md b/TODO.md
index c43b018..28beaae 100644
--- a/TODO.md
+++ b/TODO.md
@@ -2,6 +2,7 @@
 
 ## Documentation
 
+- [ ] Add more detailed examples of how to use `Zod` with the `defaultErrors.validate` option.
 - [ ] Figure out a Logo for the `enthusiastic-js` Organization and maybe the Form Observer package?
 - [ ] In the interest of time, we're probably going to have to do the bare minimum when it comes to the documentation. Make the API clear, give some helpful examples, etc. After we've release the first draft of the project, we can start thinking about how to "perfect" the docs. But for now, don't get too paranoid about the wording.
 - [ ] Adding demos somewhere in this repo (or in something like a CodeSandbox) would likely be helpful for developers. **Edit**: We now have examples for the `FormValidityObserver`. Would examples for the `FormObserver` or the `FormStorageObserver` also be helpful?
diff --git a/docs/form-validity-observer/README.md b/docs/form-validity-observer/README.md
index 3c17ce5..75dd96b 100644
--- a/docs/form-validity-observer/README.md
+++ b/docs/form-validity-observer/README.md
@@ -116,6 +116,17 @@ The `FormValidityObserver()` constructor creates a new observer and configures i
           The <code>renderer</code> defaults to a function that accepts error messages of type <code>string</code> and renders them to the DOM as raw HTML.
         </p>
       </dd>
+      <dt id="form-validity-observer-options-default-errors"><code>defaultErrors: ValidationErrors&lt;M, E&gt;</code></dt>
+      <dd>
+        <p>
+          Configures the default error messages to display for the validation constraints. (See the <a href="#method-formvalidityobserverconfigureename-string-errormessages-validationerrorsm-e-void"><code>configure</code></a> method for more details about error message configuration, and refer to the <a href="./types.md#validationerrorsm-e"><code>ValidationErrors</code></a> type for more details about validation constraints.)
+        </p>
+        <p>
+          <blockquote>
+            <strong>Note: The <code>defaultErrors.validate</code> option will provide a default custom validation function for <em>all</em> fields in your form.</strong> This is primarily useful if you have a reusable validation function that you want to apply to all of your form's fields (for example, if you are using <a href="https://zod.dev">Zod</a>). See <a href="./guides.md#getting-the-most-out-of-the-defaulterrors-option"><i>Getting the Most out of the <code>defaultErrors</code></i> Option</a> for examples on how to use this option effectively.
+          </blockquote>
+        </p>
+      </dd>
     </dl>
   </dd>
 </dl>
@@ -204,11 +215,11 @@ form1.elements[0].dispatchEvent(new FocusEvent("focusout")); // Does nothing
 
 ### Method: `FormValidityObserver.configure<E>(name: string, errorMessages: `[`ValidationErrors<M, E>`](./types.md#validationerrorsm-e)`): void`
 
-Configures the error messages that will be displayed for a form field's validation constraints. If an error message is not configured for a validation constraint, then the field's [`validationMessage`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLObjectElement/validationMessage) will be used instead. For [native form fields](https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/elements), the browser automatically supplies a default `validationMessage` depending on the broken constraint.
+Configures the error messages that will be displayed for a form field's validation constraints. If an error message is not configured for a validation constraint and there is no corresponding [default configuration](#form-validity-observer-options-default-errors), then the field's [`validationMessage`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLObjectElement/validationMessage) will be used instead. For [native form fields](https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/elements), the browser automatically supplies a default `validationMessage` depending on the broken constraint.
 
-> Note: If the field is _only_ using the browser's default error messages, it does _not_ need to be `configure`d.
+> Note: If the field is _only_ using the configured [`defaultErrors`](#form-validity-observer-options-default-errors) and/or the browser's default error messages, it _does not_ need to be `configure`d.
 
-The Form Element Type, `E`, represents the form field being configured. This type is inferred from the `errorMessages` configuration and defaults to a general [`ValidatableField`](./types.md#validatablefield).
+The Field Element Type, `E`, represents the form field being configured. This type is inferred from the `errorMessages` configuration and defaults to a general [`ValidatableField`](./types.md#validatablefield).
 
 #### Parameters
 
@@ -297,7 +308,7 @@ When the `focus` option is `false`, you can consider `validateField()` to be an
 
 Marks the form field having the specified `name` as invalid (via the [`[aria-invalid="true"]`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-invalid) attribute) and applies the provided error `message` to it. Typically, you shouldn't need to call this method manually; but in rare situations it might be helpful.
 
-The Form Element Type, `E`, represents the invalid form field. This type is inferred from the error `message` if it is a function. Otherwise, `E` defaults to a general [`ValidatableField`](./types.md#validatablefield).
+The Field Element Type, `E`, represents the invalid form field. This type is inferred from the error `message` if it is a function. Otherwise, `E` defaults to a general [`ValidatableField`](./types.md#validatablefield).
 
 #### Parameters
 
diff --git a/docs/form-validity-observer/guides.md b/docs/form-validity-observer/guides.md
index 0f1ceac..7cdb86b 100644
--- a/docs/form-validity-observer/guides.md
+++ b/docs/form-validity-observer/guides.md
@@ -4,6 +4,7 @@ Here you'll find helpful tips on how to use the `FormValidityObserver` effective
 
 - [Enabling/Disabling Accessible Error Messages](#enabling-accessible-error-messages-during-form-submissions)
 - [Keeping Track of Visited/Dirty Fields](#keeping-track-of-visiteddirty-fields)
+- [Getting the Most out of the `defaultErrors` option](#getting-the-most-out-of-the-defaulterrors-option)
 - [Keeping Track of Form Data](#keeping-track-of-form-data)
 - [Recommendations for Conditionally Rendered Fields](#recommendations-for-conditionally-rendered-fields)
 - [Recommendations for Styling Form Fields and Their Error Messages](#recommendations-for-styling-form-fields-and-their-error-messages)
@@ -129,6 +130,150 @@ To get an idea of how these event listeners would function, you can play around
 
 You can learn more about what can be done with forms using pure JS on our [Philosophy](../extras/philosophy.md#avoid-unnecessary-overhead-and-reinventing-the-wheel) page.
 
+## Getting the Most out of the `defaultErrors` Option
+
+Typically, we want the error messages in our application to be consistent. Unfortunately, this can sometimes cause us to write the same error messages over and over again. For example, consider a message that might be displayed for the `required` constraint:
+
+```html
+<form>
+  <label for="first-name">First Name</label>
+  <input id="first-name" type="text" required aria-describedby="first-name-error" />
+  <div id="first-name-error" role="alert"></div>
+
+  <label for="last-name">Last Name</label>
+  <input id="last-name" type="text" required aria-describedby="last-name-error" />
+  <div id="last-name-error" role="alert"></div>
+
+  <label for="email">Email</label>
+  <input id="email" type="email" required aria-describedby="email-error" />
+  <div id="email-error" role="alert"></div>
+
+  <!-- Other Fields ... -->
+</div>
+```
+
+We might configure our error messages like so
+
+```js
+const observer = new FormValidityObserver("focusout");
+observer.configure("first-name", { required: "First Name is required." });
+observer.configure("last-name", { required: "Last Name is required." });
+observer.configure("email", { required: "Email is required." });
+// Configurations for other fields ...
+```
+
+But this is redundant (and consequently, error-prone). Since all of our error messages for the `required` constraint follow the same format (`"<FIELD_NAME> is required"`), it would be better for us to use the [`defaultErrors`](./README.md#form-validity-observer-options-default-errors) configuration option instead.
+
+```js
+const observer = new FormValidityObserver("focusout", {
+  defaultErrors: {
+    required: (field) => `${field.labels?.[0].textContent ?? "This field"} is required.`;
+  },
+});
+```
+
+This gives us one consistent way to define the `required` error message for _all_ of our fields. Of course, it's possible that not all of your form controls will be labeled by a `<label>` element. For instance, a `radiogroup` is typically labeled by a `<legend>` instead. In this case, you may choose to make the error message more generic
+
+```js
+const observer = new FormValidityObserver("focusout", {
+  defaultErrors: { required: "This field is required" },
+});
+```
+
+Or you may choose to make the error message more flexible
+
+```js
+const observer = new FormValidityObserver("focusout", {
+  defaultErrors: {
+    required(field) {
+      if (field instanceof HTMLInputElement && field.type === "radio") {
+        const radiogroup = input.closest("fieldset[role='radiogroup']");
+        const legend = radiogroup.firstElementChild.matches("legend") ? radiogroup.firstElementChild : null;
+        return `${legend?.textContent ?? "This field"} is required.`;
+      }
+
+      return `${field.labels?.[0].textContent ?? "This field"} is required.`;
+    },
+  },
+});
+```
+
+And if you ever need a _unique_ error message for a specific field, you can still configure it explicitly.
+
+```js
+const observer = new FormValidityObserver("focusout", {
+  defaultErrors: { required: "This field is required" },
+});
+
+observer.configure("my-unique-field", { required: "This field has a unique `required` error!" });
+```
+
+### Default Validation Functions
+
+The `validate` option in the `defaultErrors` object provides a default custom validation function for _all_ of the fields in your form. This can be helpful if you have a reusable validation function that you want to apply to all of your form's fields. For example, if you're using [`Zod`](https://zod.dev) to validate your form data, you could do something like this:
+
+```js
+const schema = z.object({
+  "first-name": z.string(),
+  "last-name": z.string(),
+  email: z.string().email(),
+});
+
+const observer = new FormValidityObserver("focusout", {
+  defaultErrors: {
+    validate(field) {
+      const result = schema.shape[field.name].safeParse(field.value);
+      // Extract field's error message from `result`
+      return errorMessage;
+    },
+  },
+});
+```
+
+By leveraging `defaultErrors.validate`, you can easily use Zod (or any other validation tool) on your frontend. If you're using an SSR framework, you can use the exact same tool on your backend. It's the best of both worlds!
+
+### Zod Validation with Nested Fields
+
+For more complex form structures (e.g., "Nested Fields" as objects or arrays), you will need to write some advanced logic to make sure that you access the correct `safeParse` function. For example, if you have a field named `address.name.first`, then you'll need to recursively follow the path from `address` to `first` to access the correct `safeParse` function. The [`shape`](https://zod.dev/?id=shape) property (for objects) and the [`element`](https://zod.dev/?id=element) property (for arrays) in Zod will help you accomplish this. Alternatively, you can flatten your object structure entirely:
+
+```js
+const schema = z.object({
+  "address.name.first": z.string(),
+  "address.name.last": z.string(),
+  "address.city": z.string(),
+  // Other fields...
+});
+```
+
+This enables you to use the approach that we showed above without having to write any recursive logic. It's arguably more performant than defining and walking through nested objects, but it requires you to be doubly sure that you're spelling all of your fields' names correctly. Also note that the logic for handling arrays in this example would take a little effort and may require some recursion. However, this logic shouldn't be too difficult to write.
+
+If there's sufficient interest from the community, we may add some Zod helper functions to our packages to take this burden off of developers.
+
+### Zod Validation Using Existing Libraries
+
+Another option is to use an existing library that validates forms with Zod (e.g., `@conform-to/zod`) and to extract the error messages from that tool. For example, you might do something like the following:
+
+```js
+import { FormValidityObserver } from "@form-observer";
+import { parseWithZod } from "@conform-to/zod";
+import { z } from "zod";
+
+const schema = z.object({
+  email: z.string().email(),
+  password: z.string(),
+});
+
+const observer = new FormValidityObserver("focusout", {
+  defaultErrors: {
+    validate(field) {
+      const results = parseWithZod(new FormData(field.form), schema);
+      // Grab the correct error message from `results` object by using `field.name`.
+      return errorMessage;
+    },
+  },
+});
+```
+
 ## Keeping Track of Form Data
 
 Many form libraries offer stateful solutions for managing the data in your forms as JSON. But there are a few disadvantages to this approach:
diff --git a/docs/form-validity-observer/types.md b/docs/form-validity-observer/types.md
index df7fbfa..b2ce9a7 100644
--- a/docs/form-validity-observer/types.md
+++ b/docs/form-validity-observer/types.md
@@ -121,6 +121,7 @@ Remember that each instance of the `FormValidityObserver` determines its `M` typ
 ### Primary Uses
 
 - [`FormValidityObserver.configure`](./README.md#method-formvalidityobserverconfigureename-string-errormessages-validationerrorsm-e-void)
+- [`FormValidityObserverOptions.defaultErrors`](./README.md#form-validity-observer-options-default-errors)
 
 ## `ErrorDetails<M, E>`
 
diff --git a/packages/core/FormValidityObserver.d.ts b/packages/core/FormValidityObserver.d.ts
index 64ce685..7b39a24 100644
--- a/packages/core/FormValidityObserver.d.ts
+++ b/packages/core/FormValidityObserver.d.ts
@@ -34,7 +34,7 @@ export interface ValidationErrors<M, E extends ValidatableField = ValidatableFie
   validate?(field: E): void | ErrorDetails<M, E> | Promise<void | ErrorDetails<M, E>>;
 }
 
-export interface FormValidityObserverOptions<M> {
+export interface FormValidityObserverOptions<M, E extends ValidatableField = ValidatableField> {
   /**
    * Indicates that the observer's event listener should be called during the event capturing phase instead of
    * the event bubbling phase. Defaults to `false`.
@@ -57,6 +57,12 @@ export interface FormValidityObserverOptions<M> {
    * (e.g., DOM Nodes, React Elements, etc.) to the DOM instead.
    */
   renderer?(errorContainer: HTMLElement, errorMessage: M | null): void;
+
+  /**
+   * The default errors to display for the field constraints. (The `validate` option configures the default
+   * _custom validation function_ used for all form fields.)
+   */
+  defaultErrors?: ValidationErrors<M, E>;
 }
 
 export interface ValidateFieldOptions {
@@ -76,9 +82,9 @@ interface FormValidityObserverConstructor {
    *
    * @param types The type(s) of event(s) that trigger(s) form field validation.
    */
-  new <T extends OneOrMany<EventType>, M = string>(
+  new <T extends OneOrMany<EventType>, M = string, E extends ValidatableField = ValidatableField>(
     types: T,
-    options?: FormValidityObserverOptions<M>,
+    options?: FormValidityObserverOptions<M, E>,
   ): FormValidityObserver<M>;
 }
 
@@ -153,10 +159,12 @@ interface FormValidityObserver<M = string> {
 
   /**
    * Configures the error messages that will be displayed for a form field's validation constraints.
-   * If an error message is not configured for a validation constraint, then the browser's default error message
-   * for that constraint will be used instead.
+   * If an error message is not configured for a validation constraint and there is no corresponding
+   * {@link FormValidityObserverOptions.defaultErrors default configuration}, then the browser's
+   * default error message for that constraint will be used instead.
    *
-   * Note: If the field is _only_ using the browser's default error messages, it does _not_ need to be `configure`d.
+   * Note: If the field is _only_ using the configured {@link FormValidityObserverOptions.defaultErrors `defaultErrors`}
+   * and/or the browser's default error messages, it _does not_ need to be `configure`d.
    *
    * @param name The `name` of the form field
    * @param errorMessages A `key`-`value` pair of validation constraints (key)
diff --git a/packages/core/FormValidityObserver.js b/packages/core/FormValidityObserver.js
index 7eba104..f6e5068 100644
--- a/packages/core/FormValidityObserver.js
+++ b/packages/core/FormValidityObserver.js
@@ -49,6 +49,7 @@ const attrs = Object.freeze({ "aria-describedby": "aria-describedby", "aria-inva
 
 /**
  * @template M
+ * @template {import("./types.d.ts").ValidatableField} [E=import("./types.d.ts").ValidatableField]
  * @typedef {Object} FormValidityObserverOptions
  *
  * @property {boolean} [useEventCapturing] Indicates that the observer's event listener should be called during
@@ -65,6 +66,9 @@ const attrs = Object.freeze({ "aria-describedby": "aria-describedby", "aria-inva
  *
  * You can replace the default function with your own `renderer` that renders other types of error messages
  * (e.g., DOM Nodes, React Elements, etc.) to the DOM instead.
+ *
+ * @property {ValidationErrors<M, E>} [defaultErrors] The default errors to display for the field constraints.
+ * (The `validate` option configures the default _custom validation function_ used for all form fields.)
  */
 
 /**
@@ -80,17 +84,12 @@ const attrs = Object.freeze({ "aria-describedby": "aria-describedby", "aria-inva
 
 /** @template [M=string] */
 class FormValidityObserver extends FormObserver {
-  /** @type {HTMLFormElement | undefined} The `form` currently being observed by the `FormValidityObserver` */
-  #form;
-
-  /** @type {Document | ShadowRoot | undefined} The Root Node for the currently observed `form`. */
-  #root;
+  /** @type {HTMLFormElement | undefined} The `form` currently being observed by the `FormValidityObserver` */ #form;
+  /** @type {Document | ShadowRoot | undefined} The Root Node for the currently observed `form`. */ #root;
 
-  /** @readonly @type {Required<FormValidityObserverOptions<M>>["scroller"]} */
-  #scrollTo;
-
-  /** @readonly @type {Required<FormValidityObserverOptions<M>>["renderer"]} */
-  #renderError;
+  /** @readonly @type {Required<FormValidityObserverOptions<M>>["scroller"]} */ #scrollTo;
+  /** @readonly @type {Required<FormValidityObserverOptions<M>>["renderer"]} */ #renderError;
+  /** @readonly @type {FormValidityObserverOptions<M>["defaultErrors"]} */ #defaultErrors;
 
   /**
    * @readonly
@@ -106,13 +105,14 @@ class FormValidityObserver extends FormObserver {
   /**
    * @template {import("./types.d.ts").OneOrMany<import("./types.d.ts").EventType>} T
    * @template [M=string]
+   * @template {import("./types.d.ts").ValidatableField} [E=import("./types.d.ts").ValidatableField]
    * @overload
    *
    * Provides a way to validate an `HTMLFormElement`'s fields (and to display _accessible_ errors for those fields)
    * in response to the events that the fields emit.
    *
    * @param {T} types The type(s) of event(s) that trigger(s) form field validation.
-   * @param {FormValidityObserverOptions<M>} [options]
+   * @param {FormValidityObserverOptions<M, E>} [options]
    * @returns {FormValidityObserver<M>}
    */
 
@@ -135,6 +135,7 @@ class FormValidityObserver extends FormObserver {
     super(types, eventListener, { passive: true, capture: options?.useEventCapturing });
     this.#scrollTo = options?.scroller ?? defaultScroller;
     this.#renderError = /** @type {any} Necessary because of double `M`s */ (options?.renderer ?? defaultErrorRenderer);
+    this.#defaultErrors = options?.defaultErrors;
   }
 
   /**
@@ -301,14 +302,15 @@ class FormValidityObserver extends FormObserver {
 
     const constraint = getBrokenConstraint(field.validity);
     if (constraint) {
-      const error = this.#errorMessagesByFieldName.get(name)?.[constraint];
+      const error = this.#errorMessagesByFieldName.get(name)?.[constraint] ?? this.#defaultErrors?.[constraint];
 
       if (typeof error === "object") return this.#resolveValidation(field, error, options);
       return this.#resolveValidation(field, error || field.validationMessage, options);
     }
 
     // User-driven Validation (MUST BE DONE LAST)
-    const errOrPromise = this.#errorMessagesByFieldName.get(name)?.validate?.(field);
+    const customValidator = this.#errorMessagesByFieldName.get(name)?.validate ?? this.#defaultErrors?.validate;
+    const errOrPromise = customValidator?.(field);
     if (errOrPromise instanceof Promise) return errOrPromise.then((e) => this.#resolveValidation(field, e, options));
     return this.#resolveValidation(field, errOrPromise, options);
   }
@@ -441,10 +443,12 @@ class FormValidityObserver extends FormObserver {
 
   /**
    * Configures the error messages that will be displayed for a form field's validation constraints.
-   * If an error message is not configured for a validation constraint, then the browser's default error message
-   * for that constraint will be used instead.
+   * If an error message is not configured for a validation constraint and there is no corresponding
+   * {@link FormValidityObserverOptions.defaultErrors default configuration}, then the browser's
+   * default error message for that constraint will be used instead.
    *
-   * Note: If the field is _only_ using the browser's default error messages, it does _not_ need to be `configure`d.
+   * Note: If the field is _only_ using the configured {@link FormValidityObserverOptions.defaultErrors `defaultErrors`}
+   * and/or the browser's default error messages, it _does not_ need to be `configure`d.
    *
    * @template {import("./types.d.ts").ValidatableField} E
    * @param {string} name The `name` of the form field
diff --git a/packages/core/__tests__/FormValidityObserver.test.ts b/packages/core/__tests__/FormValidityObserver.test.ts
index 4ae9539..4a75482 100644
--- a/packages/core/__tests__/FormValidityObserver.test.ts
+++ b/packages/core/__tests__/FormValidityObserver.test.ts
@@ -1201,6 +1201,60 @@ describe("Form Validity Observer (Class)", () => {
         expect(formValidityObserver.clearFieldError).toHaveBeenCalledWith(field.name);
       });
 
+      it("Uses the default error message configurations provided to the constructor", () => {
+        /* ---------- Setup ---------- */
+        // Render Fields
+        const form = document.createElement("form");
+        const input1 = createElementWithProps("input", { name: "first", required: true, pattern: "\\d+" });
+        const input2 = createElementWithProps("input", { name: "second", required: true, pattern: "\\d+" });
+
+        document.body.append(form);
+        form.append(input1, input2);
+
+        // Configure Observer and Error Messages
+        const defaultErrors = {
+          required: "You MUST submit this field",
+          pattern: "This doesn't look right...",
+          validate: (field) => `Field ${field.name} failed validation` as const,
+        } as const satisfies ValidationErrors<string>;
+
+        const observer = new FormValidityObserver(types[0], { defaultErrors });
+        observer.observe(form);
+
+        const customPatternError = "Numbers only, please.";
+        expect(customPatternError).not.toBe(defaultErrors.pattern);
+        observer.configure(input1.name, { pattern: customPatternError });
+
+        const customValidator = (_: FormField) => "Customized" as const;
+        observer.configure(input2.name, { validate: customValidator });
+
+        /* ---------- Run Assertions ---------- */
+        // `required` Error (Same, Both Unconfigured)
+        observer.validateField(input1.name);
+        expectErrorFor(input1, defaultErrors.required, "none");
+
+        observer.validateField(input2.name);
+        expectErrorFor(input2, defaultErrors.required, "none");
+
+        // `pattern` Error (Different, 1st Input Customized)
+        input1.value = "a";
+        observer.validateField(input1.name);
+        expectErrorFor(input1, customPatternError, "none");
+
+        input2.value = "b";
+        observer.validateField(input2.name);
+        expectErrorFor(input2, defaultErrors.pattern, "none");
+
+        // Custom `validate` Function (Different, 2nd Input Customized);
+        input1.value = "1";
+        observer.validateField(input1.name);
+        expectErrorFor(input1, defaultErrors.validate(input1), "none");
+
+        input2.value = "2";
+        observer.validateField(input2.name);
+        expectErrorFor(input2, customValidator(input2), "none");
+      });
+
       it("Focuses (AND scrolls to) an invalid field when the options require it (default scroller)", async () => {
         /* ---------- Setup ---------- */
         // Render Field
@@ -2810,6 +2864,44 @@ describe("Form Validity Observer (Class)", () => {
     },
   });
 
+  /* -------------------- Renderer Type Tests --> `defaultErrors` Option -------------------- */
+  // Note: Given the extensive tests for the `configure` method, and given that the `defaultErrors` option
+  // uses the same type for the error message configuration, we'll just do some quick happy-path tests here.
+
+  // Default Renderer
+  new FormValidityObserver(event1, {
+    defaultErrors: {
+      badinput: staticErrorString,
+      required: dynamicErrorString,
+
+      min: { message: staticErrorString },
+      minlength: { message: dynamicErrorString },
+
+      validate(field) {
+        if (Math.random() < 0.5) return `${field.name} is a weird name`;
+        return Promise.resolve({ message: dynamicErrorString, render: true });
+      },
+    },
+  });
+
+  // Custom Renderer
+  new FormValidityObserver(event1, {
+    renderer,
+    defaultErrors: {
+      max: { message: staticErrorString, render: false },
+      maxlength: { message: dynamicErrorString, render: false },
+
+      type: { message: staticCustomError, render: true },
+      pattern: { message: dynamicCustomError, render: true },
+
+      validate(_field) {
+        if (Math.random() < 100 / 3) return staticErrorString;
+        if (Math.random() < (100 / 3) * 2) return { message: staticErrorString, render: false };
+        return Promise.resolve({ message: dynamicCustomError, render: true });
+      },
+    },
+  });
+
   /* -------------------- Type Tests for Dynamic Fields -------------------- */
   /* ---------- `setFieldError` ---------- */
   // Both specific AND general types work
@@ -2818,7 +2910,7 @@ describe("Form Validity Observer (Class)", () => {
   new FormValidityObserver(event1).setFieldError(name, (_: ValidatableField) => "");
   new FormValidityObserver(event1).setFieldError(name, (_: FormField) => "");
 
-  /* ---------- `validate` Constraint ---------- */
+  /* ---------- `configure`d Error Messages ---------- */
   // Both specific AND general types work
   new FormValidityObserver(event1).configure(name, { required: (_: HTMLTextAreaElement) => "" });
   new FormValidityObserver(event1).configure(name, { required: (_: HTMLInputElement) => "" });
@@ -2836,6 +2928,14 @@ describe("Form Validity Observer (Class)", () => {
     // @ts-expect-error -- Incompatible with the `HTMLInputElement` specified earlier
     validate: (_: HTMLSelectElement) => "",
   });
+
+  /* ---------- Default Error Messages ---------- */
+  // Both specific AND general types work.
+  // (Because `configure` uses the same type for the error message configuration, we'll only do some quick tests here.)
+  new FormValidityObserver(event1, { defaultErrors: { required: (_: HTMLTextAreaElement) => "" } });
+  new FormValidityObserver(event1, { defaultErrors: { required: (_: HTMLInputElement) => "" } });
+  new FormValidityObserver(event1, { defaultErrors: { required: (_: ValidatableField) => "" } });
+  new FormValidityObserver(event1, { defaultErrors: { required: (_: FormField) => "" } });
 })();
 /* eslint-enable @typescript-eslint/no-empty-function */
 /* eslint-enable no-unreachable */