Проверка полей в Nuxt

Клиент может пропустить пустое поле, но полагаться только на браузер нельзя: запрос можно отправить и в обход формы. Проверку обязательных значений делают в обработчике API до любой записи в базу или файлы.

Если заголовок заметки пустой, обработчик не возвращает успех. Вместо этого выставляют HTTP-статус 400 через setResponseStatus и отдают JSON с пояснением. Так клиент понимает, что запрос отклонён из-за данных, а не из-за сбоя сервера.

Давайте разберём проверку в notes.post.js:

export default defineEventHandler(async (event) => {
	const body = await readBody(event);
	const title = body.title?.trim();
	
	if (!title) {
		setResponseStatus(event, 400);
		return { message: 'Title is required' };
	}
	
	return { title };
});

Если пользователь отправит форму с пустым заголовком, ответ получит статус 400 и поле message с текстом на английском. Страницу для показа этой ошибки мы оформим отдельно; здесь важна логика на сервере.

Страница с заполненным полем по-прежнему успешно вызывает API. Пример с непустым title:

<script setup>
	const title = ref('');
	
	async function submitForm() {
		await $fetch('/api/notes', {
			method: 'POST',
			body: { title: title.value },
		});
	}
</script>
<template>
	<form @submit.prevent="submitForm">
		<input v-model="title" type="text">
		<button type="submit">
			Save
		</button>
	</form>
</template>

Добавьте в обработчик сотрудников проверку: пустое имя должно приводить к ответу со статусом 400.

Верните из обработчика сообщение на английском, если имя не заполнено.