The magical disappearing UI framework

 - The web's JavaScript bloat crisis, solved. Svelte turns your templates into tiny, framework-less vanilla JavaScript.
 - Simple and familiar. Build apps out of composable, easy-to-write blocks using languages you already know.
 - Super fast, rock solid. Compile-time static analysis ensures the browser does no more work than it needs to.

svelte

Creating forms is one of the simplest and most complicated things at the same time. A basic form consists of many different things happening, we have to retain the value, we have to keep watch of validation and we have to show error messages when something is invalid, this is on both the fields and on the entire form itself if we send a request off to the backend service.

So we're going to create a form using just the normal svelte features. Then we'll look into creating a form using the svelte forms lib.

You will create a simple form with svelte's built-in form directives, we will explore using `on:submit` and `bind:value` in order to submit a form with data in it. For styling purposes, we'll be using Tailwind CSS.

Creating a Simple Form with Svelte

You will learn how to create a form with svelte-forms-lib. We will look at the `createForm` function and a reactive variable called `form` to store the field values.

Create a Simple Form with svelte-forms-lib

You will add custom validation to a form in Svelte using svelte-forms-lib, we will explore using the `errors` store and the `validate` option in order to validate a form before submission.

Create Custom Form Validation Rules with svelte-forms-lib

You will add yup validation to a form in Svelte using svelte-forms-lib.

We have our form that is using svelte-forms-lib along with some custom validation logic. Here we will replace the custom validation with yup which provides some built in validation logic.

Create form validation with yup in Svelte

You will look at validating a form field when a value has changed and focus has been moved away with the `handleChange` function from the svelte-forms-lib.

Handle form validation when a value changes in Svelte

You will learn how to create simple forms quicker with the helper components provided by svelte-forms-lib. We will start off with a form that contains some validation rules along with input fields and error messages.

Create forms in Svelte with Svelte Forms Lib

Andrew Smith

Course Content