Building Forms

Building forms can be a tedious process, but with the components provided by Safḥa, the process is made much easier. The form components are designed to be flexible and easy to use, and they can be used to build forms of any complexity.

Safḥa includes a number of form components that can be used to build forms of any complexity. You can see a list of all the form components in the blocks section.

Starter Example

Here is an example of what a form might look like using Safḥa form components:

<template>
	<FormItem v-model="eventData.title" name="title">
		<FormLabel>
			Title
		</FormLabel>

		<FormControl>
			<FieldInputA placeholder="Title" />
		</FormControl>

		<FormMessage />
	</FormItem>

	<FormItem v-model="eventData.category" name="category">
		<FormLabel>
			Category
		</FormLabel>

		<FormControl>
			<SelectInputA
				:options="categories"
				placeholder="Category"
			/>
		</FormControl>

		<FormMessage />
	</FormItem>

	<FormItem
		v-model="allDay"
		name="allDay"
	>
		<FormControl>
			<SwitchB>
				<SwitchTrack />
				<SwitchThumb />
			</SwitchB>
			<FormPost
				@click="allDay = !allDay"
			>
				All Day
			</FormPost>
		</FormControl>
	</FormItem>

	<FormItem v-model="eventData.date.start" name="date.start">
		<FormLabel>
			Start Date
		</FormLabel>

		<FormControl>
			<DateInputA
				:mode="allDay ? 'date' : 'dateTime'"
				:placeholder="allDay ? 'Enter date' : 'Enter date and time'"
			/>
		</FormControl>
		<FormMessage />
	</FormItem>

	<FormItem v-model="eventData.date.end" name="date.end">
		<FormLabel>
			End Date
		</FormLabel>

		<FormControl>
			<DateInputA
				:mode="allDay ? 'date' : 'dateTime'"
				:placeholder="allDay ? 'Enter date' : 'Enter date and time'"
			/>
		</FormControl>

		<FormMessage />
	</FormItem>

	<ButtonA @click="submitForm">
		Submit
	</ButtonA>
</template>

<script setup lang="ts">
const allDay = ref(false);
const eventData = ref({
	title: '',
	category: '',
	date: {
		start: '',
		end: '',
	},
});

const categories = [
	{
		label: 'Personal',
		value: 'personal',
	},
	{
		label: 'Work',
		value: 'work',
	},
];

const submitForm = () => {
	console.log(eventData.value);
};
</script>

The above example provides a minimal way to build a form using Safḥa form components. However, we can improve the form by adding validation.

Validation

Safḥa includes VeeValidate and zod libraries to provide an easy way to validate forms.

Wrapping with VeeValidate

Here is an example of how to use VeeValidate to validate the form:

WARNING

VeeValidate Form component is renamed to VeeForm in Safḥa.

<template>
	<VeeForm
		:validation-schema="validationSchema"
		@submit="onFormSubmit"
	>
		<FormItem v-model="eventData.title" name="title">
			<FormLabel>
				Title
			</FormLabel>

			<FormControl>
				<FieldInputA placeholder="Title" />
			</FormControl>

			<FormMessage />
		</FormItem>

		<!-- ... rest of  -->

		<ButtonA
			type="submit"
		>
			Submit
		</ButtonA>
	</VeeForm>
</template>

Notice that we wrap the components in VeeForm component (which is imported automatically). We also provide a validation-schema prop to the VeeForm component. The validationSchema is an object that defines the validation rules for each field in the form.

Also, we make sure that the ButtonA component has a type="submit" prop.

Adding Validation Schema

To add a validation schema, we use zod library to define the schema object. Here is an example of how to define a validation schema:

<script setup lang="ts">
import { toTypedSchema } from '@vee-validate/zod';
import { string, object, number } from 'zod';

const validationSchema = toTypedSchema(
	object({
		'title': string().min(5, 'Title must be at least 5 characters.'),
		'category': string().min(1, 'Please select a category.'),
		'startDate': number({
			required_error: 'Start date is required',
		}),
		'end-date': number({
			required_error: 'End date is required',
		}),
	})
);

// Handle form submission, it will not be called if the form is invalid
const onSubmit = (values: any) => {
	console.log('Submitted Values', values);
};
</script>

By adding validation the form will not be submitted if any of the fields are invalid. The error messages will be displayed below the fields that have errors. If the form is valid, the onSubmit function will be called and you can handle the form submission logic there.