Form Validation with Svelte

Form Validation with Yup

Yup is a JavaScript schema builder for value passing and validation. We can use Yup to help us validate forms in Svelte.

We can use bind:value to bind input value, and validate the form using schema.validate(values).

<script>
	// Define schema with Yup
	import * as yup from 'yup';
	const schema = yup.object().shape({
		email: yup.string().required('Please provide your email').email("Email doesn't look right"),
		password: yup.string().required('Password is required')
	});

	let values = {};
	let errors = {};

	async function submitHandler() {
		try {
			// `abortEarly: false` to get all the errors
			await schema.validate(values, { abortEarly: false });
			alert(JSON.stringify(values, null, 2));
			errors = {};
		} catch (err) {
			errors = extractErrors(err);
		}
	}
	function extractErrors(err) {
		return err.inner.reduce((acc, err) => {
			return { ...acc, [err.path]: err.message };
		}, {});
	}
</script>

<form on:submit|preventDefault={submitHandler}>
	<div>
		<input type="text" name="email" bind:value={values.email} placeholder="Your email" />
		{#if errors.email}{errors.email}{/if}
	</div>
	<div>
		<input type="password" name="password" bind:value={values.password} placeholder="Password" />
		{#if errors.password}{errors.password}{/if}
	</div>
	<div>
		<button type="submit">Register</button>
	</div>
</form>