 Resources from Andrew Smith in 2021

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. 

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

Create forms in Svelte with Svelte Forms Lib

In this lesson, you will learn how to setup the zero configuration blazing fast web application bundler Parcel with Svelte.

Run and Build Svelte with Parcel

JavaScript® (often shortened to JS) is a lightweight, interpreted, object-oriented language with first-class functions, most known as the scripting language for Web pages, but used in many non-browser environments as well such as node.js or Apache CouchDB. It is a prototype-based, multi-paradigm scripting language that is dynamic, and supports object-oriented, imperative, and functional programming styles.

javascript

Opening large JSON files inside of your IDE or text editor can be a pain at times, with this command line tool you can drill down into large JSON files with just a few commands.

We will explore opening a large JSON file containing an array of more than 5000 items, while being able to filter down into an item and to a given property with the help of autocompletion from the fx command line tool.

Interactively exploring a large JSON file with fx

You will learn how to create a reusable button in Svelte which allows you to update its content, it's look and the action it should perform when clicked.

Create a Reusable Button Component with Svelte

We will learn how to use the fade transition in svelte to create a simple transition. We will also look at the additional parameters you can pass to this transition to create a staggering effect.

Create a Fade Transition with Svelte

We will learn how to create a component and use the tweened function from the `svelte/motion` package. We will create a function that will work as our looping mechanism and learn how to reduce the chances of our function having a memory leak by using the `onDestroy` lifecycle hook when a component is unmounted.

Create a Looping Tween Motion with 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.

Refactor a Svelte Form to Use svelte-forms-lib Components

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 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 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 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

In this lesson you will learn how to attach Event Handlers to buttons and input fields. Event handlers normally follows the `on:[event]` format. If you are making use of two way binding you should use `bind:` instead, for example an input field could use bind:value.

Topics

Instructors

Content Type

Andrew Smith