57 lines
1.5 KiB
Svelte
57 lines
1.5 KiB
Svelte
<script lang="ts">
|
|
import { superForm } from 'sveltekit-superforms/client';
|
|
import { UserSchema } from '$lib/types/UserSchema';
|
|
|
|
const initialFormData = { name: '' };
|
|
|
|
const { form, errors, validate, constraints } = superForm(initialFormData, {
|
|
validators: UserSchema,
|
|
warnings: {
|
|
noValidationAndConstraints: false
|
|
},
|
|
validationMethod: 'oninput' // Trigger validation on input events
|
|
});
|
|
|
|
async function handleSubmit() {
|
|
// Manually validate the form
|
|
const validationResult = await validate();
|
|
|
|
// Prevent submission if there are errors
|
|
if (!validationResult.valid) {
|
|
return;
|
|
}
|
|
|
|
// Here, we'll just log the form data
|
|
console.log(form);
|
|
}
|
|
</script>
|
|
|
|
<div class="flex items-center justify-center min-h-screen">
|
|
<form on:submit|preventDefault={handleSubmit} class="w-full max-w-md">
|
|
<div class="mb-4">
|
|
{#if $errors.name}
|
|
<span class="block mb-2 font-semibold text-red-500">{$errors.name}</span>
|
|
{:else}
|
|
<label for="name" class="block mb-2 font-semibold text-white">Name</label>
|
|
{/if}
|
|
|
|
<input
|
|
name="name"
|
|
type="text"
|
|
class="w-full px-3 py-2 bg-transparent border-gray-100 rounded-md border-1 ring-0 ring-white focus:outline-none focus:ring-2 focus:ring-blue-500"
|
|
bind:value={$form.name}
|
|
aria-invalid={$errors.name ? 'true' : undefined}
|
|
{...constraints.name}
|
|
/>
|
|
</div>
|
|
|
|
<button
|
|
type="submit"
|
|
class="w-full px-4 py-2 text-white bg-blue-500 rounded-md hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500"
|
|
disabled={$errors.name}
|
|
>
|
|
Submit
|
|
</button>
|
|
</form>
|
|
</div>
|