@samuel-charpentier/sform 0.0.7 → 0.0.9

package/README.md

@@ -125,11 +125,12 @@ Wrapper component that provides form context to all child fields.
 </Sform>
 ```
 
-| Prop         | Type                             | Default     | Description                          |
-| ------------ | -------------------------------- | ----------- | ------------------------------------ |
-| `form`       | `RemoteForm`                     | required    | Remote form object from `form()` API |
-| `validateOn` | `'blur' \| 'change' \| 'submit'` | `'blur'`    | When to validate and show errors     |
-| `class`      | `string`                         | `undefined` | CSS class for form element           |
+| Prop            | Type                             | Default     | Description                                       |
+| --------------- | -------------------------------- | ----------- | ------------------------------------------------- |
+| `form`          | `RemoteForm`                     | required    | Remote form object from `form()` API              |
+| `validateOn`    | `'blur' \| 'change' \| 'submit'` | `'blur'`    | When to validate and show errors                  |
+| `class`         | `string`                         | `undefined` | CSS class for form element                        |
+| `preflightOnly` | `boolean`                        | `false`     | If true, client side validation is preflight only |
 
 **Validate Modes:**
 

package/dist/Sform/Sfield.svelte

@@ -6,7 +6,6 @@
 		TypedSfieldProps
 	} from './types.js';
 	import { getSformContext } from './context.svelte.js';
-	import { tick } from 'svelte';
 	import TextInput from './inputs/TextInput.svelte';
 	import NumberInput from './inputs/NumberInput.svelte';
 	import TextareaInput from './inputs/TextareaInput.svelte';
@@ -59,14 +58,6 @@
 
 	async function handleBlur() {
 		context.markTouched(name);
-		// Wait a tick - if submission started, pending will be > 0 by then
-		// This prevents stale data validation when blur fires during Enter submission
-		await tick();
-		const formState = context.getFormState();
-		if (formState.pending) {
-			return;
-		}
-		// Trigger validation with includeUntouched so blur mode shows issues
 		context.triggerValidation();
 	}
 
@@ -106,6 +97,7 @@
 		name,
 		class: hasIssues ? `${classes.input ?? ''} sform-field-error`.trim() : classes.input,
 		labelClass: classes.label,
+		wrapperClass: classes.inputWrapper,
 		showIssues,
 		onblur: handleBlur,
 		oninput: handleInput

package/dist/Sform/Sform.svelte

@@ -17,6 +17,7 @@
 		enhance,
 		validateOn = 'blur',
 		class: className,
+		preflightOnly = false,
 		children
 	}: {
 		/** Remote form object from form() API, or the result of form.for(id) */
@@ -27,6 +28,8 @@
 		enhance?: EnhanceCallback<Input>;
 		/** When to validate and show issues: 'blur' (default), 'change', or 'submit' */
 		validateOn?: ValidateOn;
+		/** If true, only run preflight validation (no submission) */
+		preflightOnly?: boolean;
 		/** Form element class */
 		class?: string;
 		/**
@@ -50,7 +53,7 @@
 
 	// Trigger validation including untouched fields (for blur mode)
 	const triggerValidation = () => {
-		form.validate({ includeUntouched: true });
+		form.validate({ includeUntouched: true, preflightOnly });
 	};
 
 	const context = createSformContext(
@@ -86,7 +89,7 @@
 	});
 
 	function handleInput() {
-		form.validate({ includeUntouched: true });
+		triggerValidation();
 	}
 
 	function handleSubmit() {

package/dist/Sform/Sform.svelte.d.ts

@@ -12,6 +12,8 @@ declare function $$render<Input extends import('@sveltejs/kit').RemoteFormInput,
         enhance?: EnhanceCallback<Input>;
         /** When to validate and show issues: 'blur' (default), 'change', or 'submit' */
         validateOn?: ValidateOn;
+        /** If true, only run preflight validation (no submission) */
+        preflightOnly?: boolean;
         /** Form element class */
         class?: string;
         /**

package/dist/Sform/inputs/ButtonInput.svelte

@@ -55,6 +55,10 @@
 
 		event.preventDefault();
 
+		// Focus the button to trigger blur on any focused input before submission
+		// This ensures blur validation runs with valid form data, not stale data
+		buttonElement.focus();
+
 		if (onsubmit) {
 			await onsubmit();
 		}
@@ -66,9 +70,16 @@
 		// Submit the form via context
 		sformContext.submitForm();
 	}
+	let buttonElement: HTMLButtonElement;
 </script>
 
-<button type={buttonType} class={className} disabled={isDisabled} onclick={handleClick}>
+<button
+	bind:this={buttonElement}
+	type={buttonType}
+	class={className}
+	disabled={isDisabled}
+	onclick={handleClick}
+>
 	{#if children}
 		{@render children(formState)}
 	{:else}

package/dist/Sform/types.d.ts

@@ -35,6 +35,8 @@ export interface SfieldClasses {
     wrapper?: string;
     /** Label element class */
     label?: string;
+    /** Input wrapper class (contains prefix, input, suffix for affix-enabled inputs) */
+    inputWrapper?: string;
     /** Input element class */
     input?: string;
     /** Hint element class */

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@samuel-charpentier/sform",
-	"version": "0.0.7",
+	"version": "0.0.9",
 	"description": "A Svelte 5 form library for SvelteKit remote forms",
 	"keywords": [
 		"svelte",