samuelandert.eth/auth.andert.me
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

added also required validation and generic error validation on typing.

Browse Source
This commit is contained in:
Samuel Andert 2023-08-08 09:13:56 +02:00
parent 720282dbfd
commit c98253ceb7
2 changed files with 5 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/lib/components/refactor/ComposerForm.svelte
View File

@ -31,14 +31,13 @@
// Update the isValidated property of the store whenever the errors object changes // Update the isValidated property of the store whenever the errors object changes
$: { $: {
// Send events to the state machine based on the validation status let isValid = fields.every((field) => !$errors[field.name]);
if (!($errors.name || $errors.email || $errors.about || $errors.age || $errors.favoriteFood)) { if (isValid) {
$me.do.state.send('VALIDATE'); $me.do.state.send('VALIDATE');
} else { } else {
$me.do.state.send('INVALIDATE'); $me.do.state.send('INVALIDATE');
} }
} }
async function handleSubmit() { async function handleSubmit() {
// Manually validate the form // Manually validate the form
const validationResult = await validate(); const validationResult = await validate();

4
src/lib/types/UserSchema.ts
View File

@ -30,10 +30,12 @@ const validationMessages = {
export const UserSchema = z.object({ export const UserSchema = z.object({
name: z.string().nonempty('Name is required.').min(3, validationMessages.name.minLength).max(10, validationMessages.name.maxLength), name: z.string().nonempty('Name is required.').min(3, validationMessages.name.minLength).max(10, validationMessages.name.maxLength),
email: z.string().email(validationMessages.email.isEmail), email: z.string().nonempty('Email is required.').email(validationMessages.email.isEmail),
about: z.string().max(500, validationMessages.about.maxLength), about: z.string().max(500, validationMessages.about.maxLength),
age: z.number().min(18, validationMessages.age.min).max(120, validationMessages.age.max), age: z.number().min(18, validationMessages.age.min).max(120, validationMessages.age.max),
favoriteFood: z.enum(['apple', 'banana', 'coconut', 'strawberry', 'mango']).refine(value => value !== '', validationMessages.favoriteFood.invalid), favoriteFood: z.enum(['apple', 'banana', 'coconut', 'strawberry', 'mango']).refine(value => value !== '', validationMessages.favoriteFood.invalid),
slider: z.number().min(0, validationMessages.slider.min).max(100, validationMessages.slider.max), slider: z.number().min(0, validationMessages.slider.min).max(100, validationMessages.slider.max),
toggle: z.boolean().refine(value => typeof value === 'boolean', validationMessages.toggle.isBoolean), toggle: z.boolean().refine(value => typeof value === 'boolean', validationMessages.toggle.isBoolean),
}).required({
name: true,
}); });