Form Actions

Form action memungkinkan Anda menangani pengiriman <form> di server, dengan pola validasi bawaan.

Mendefinisikan Actions

Ekspor objek actions dari +page.server.ts:

// src/routes/contact/+page.server.ts
import { fail } from "bosia";
import type { RequestEvent } from "bosia";

export async function load() {
	return { greeting: "Contact us" };
}

export const actions = {
	default: async ({ request }: RequestEvent) => {
		const data = await request.formData();
		const email = data.get("email") as string;
		const name = data.get("name") as string;

		const errors: Record<string, string> = {};
		if (!email) errors.email = "Email is required";
		if (!name) errors.name = "Name is required";

		if (Object.keys(errors).length > 0) {
			return fail(400, { email, name, errors });
		}

		// Process the form...
		return { success: true, email, name };
	},
};

Default Action

Sebuah <form method="POST"> tanpa atribut action akan mengenai action default:

<form method="POST">
	<input name="name" value={form?.name ?? ""} />
	<input name="email" value={form?.email ?? ""} />
	<button type="submit">Submit</button>
</form>

Named Actions

Gunakan atribut action dengan awalan ?/ untuk menarget action tertentu:

<form method="POST" action="?/reset">
	<button type="submit">Reset</button>
</form>

export const actions = {
	default: async ({ request }: RequestEvent) => {
		// ...
	},
	reset: async () => {
		return { cleared: true };
	},
};

Validasi dengan fail()

fail() mengembalikan sebuah ActionFailure — ia dikembalikan, bukan dilempar:

import { fail } from "bosia";

// Returns a 400 response with the error data
return fail(400, {
	email, // preserve user input
	name,
	errors: { email: "Invalid email format" },
});

Mengakses Data Action

Hasil action tersedia sebagai prop form:

<script lang="ts">
	let { data, form } = $props();
</script>

{#if form?.errors}
	<p class="text-red-500">{form.errors.email}</p>
{/if}

{#if form?.success}
	<p class="text-green-500">Submitted successfully!</p>
{/if}

Redirect dari Actions

Gunakan redirect() untuk berpindah halaman setelah action berhasil:

import { redirect } from "bosia";

export const actions = {
	default: async ({ request }: RequestEvent) => {
		// Process form...
		redirect(303, "/thank-you");
	},
};

Cara Kerjanya

1. Browser mengirimkan formulir sebagai request POST standar
2. Bosia memanggil fungsi action yang cocok
3. Saat berhasil: halaman dirender ulang dengan nilai kembalian action sebagai prop form dan data load() yang segar
4. Saat fail(): halaman dirender ulang dengan data kegagalan sebagai prop form pada kode status yang ditentukan
5. Saat redirect(): browser mengikuti redirect