customValidity now works with select, textarea and button.

Author: ciscoheat

CHANGELOG.md

@@ -5,11 +5,12 @@ Headlines: Added, Changed, Deprecated, Removed, Fixed, Security
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
-## [Unreleased]
+## [1.5.3] - 2023-08-16
 
 ### Fixed
 
 - Array-level errors weren't typed correctly when changing the cardinality of an array field in the schema (for example with `nonempty`).
+- `customValidity` now works with `select`, `textarea` and `button`, not just `input`.
 - SuperDebug looks a bit better now when there is no css styling on the page.
 
 ## [1.5.2] - 2023-08-15

src/lib/client/formEnhance.ts

@@ -81,8 +81,15 @@ function setCustomValidityForm<T extends AnyZodObject, M>(
   formEl: HTMLFormElement,
   errors: SuperValidated<ZodValidation<T>, M>['errors']
 ) {
-  for (const el of formEl.querySelectorAll('input')) {
-    if (noCustomValidityDataAttribute in el.dataset) continue;
+  for (const el of formEl.querySelectorAll<
+    HTMLInputElement &
+      HTMLSelectElement &
+      HTMLTextAreaElement &
+      HTMLButtonElement
+  >('input,select,textarea,button')) {
+    if (noCustomValidityDataAttribute in el.dataset) {
+      continue;
+    }
 
     const error = traversePath(errors, splitPath(el.name));
     setCustomValidity(el, error?.value);
@@ -181,6 +188,10 @@ export function formEnhance<T extends AnyZodObject, M>(
     }
 
     for (const change of get(lastChanges)) {
+      console.log(
+        '🚀 ~ file: formEnhance.ts:184 ~ checkBlur ~ change:',
+        change
+      );
       let validityEl: HTMLElement | null = null;
 
       if (options.customValidity) {

src/routes/tests/custom-validity/+page.svelte

@@ -41,15 +41,39 @@
   </label>
 
   <label>
-    Accept terms: <input
-      type="checkbox"
-      name="accept"
-      bind:checked={$form.accept}
-    />
+    <select name="menu" bind:value={$form.menu}>
+      <option value="">Select an option</option>
+      <option value="first">First</option>
+      <option value="second">Second</option>
+      <option value="third">Third</option>
+    </select>
+    {#if $errors.menu}<span class="invalid">{$errors.menu}</span>{/if}
+  </label>
+
+  <label>
+    Radio:<br />
+    <input name="radio" type="radio" bind:group={$form.radio} value={0} />
+    0<br />
+    <input name="radio" type="radio" bind:group={$form.radio} value={1} />
+    1<br />
+    <input name="radio" type="radio" bind:group={$form.radio} value={2} />
+    2
+
+    <label>
+      Text: <textarea name="text" bind:value={$form.text} />
+    </label>
+
+    <label>
+      Accept terms: <input
+        type="checkbox"
+        name="accept"
+        bind:checked={$form.accept}
+      />
+    </label>
+    <div>
+      <button>Submit</button>
+    </div>
   </label>
-  <div>
-    <button>Submit</button>
-  </div>
 </form>
 
 <!--SuperDebug data={{ $form, $errors }} /-->

src/routes/tests/custom-validity/schema.ts

@@ -5,5 +5,8 @@ export const schema = z.object({
   email: z.string().email(),
   number: z.number().min(10),
   info: z.string().min(1),
+  menu: z.enum(['first', 'second', 'third']).default('' as any),
+  radio: z.number().min(1),
+  text: z.string().min(1),
   accept: z.literal(true).default(false as true)
 });