Svelte Forms: The Missing Manual

By

Ilia Mikhailov

Let's be honest. If you are building any serious web app there will most likely be forms involved. Svelte provides us with a good set of essentials for working with forms, but if you want to add validation, smart abstractions or dynamic elements you are on your own.

Until now. I have walked the path, learned things the hard way and I want to share everything with you! The final result is a book with 150 pages, 9 chapters and 51 examples.

This book will help you:

• Learn how to work with forms in Svelte and all the gotchas
• Learn how to create smart abstractions of code and components
• Learn how to build highly dynamic, reactive nested forms
• Learn how Svelte's context, stores and slots work
• Learn the different styles of form validation with Yup and Vest

We start small by creating the simplest form possible and gradually working our way up by introducing smarter ways of doing things "The Svelte Way."

This book will save you many hours of searching for solutions. It will clear up all the confusion about where to use Svelte stores and plain objects, and will definitely level up your general Svelte knowledge.

Book Sections

Working with Forms in Svelte

Learn the basics of HTML forms, HTML5 validation, form extraction and the different ways to submit a form.

Form Bindings

Learn how to bind to variables and objects and why you might not need stores. Discover the magic of unidirectional (one-way) bindings made popular by React.

Form Components

Learn how to work with different input types, how to upload and preview files and why Svelte component bindings are not only about strings and numbers.

Intermediate Forms

Learn how to create dynamic forms, how to create a loading indicator, how to work with interdependent form fields, how to paste images into a textarea, how to do input formatting (masking), how to correctly work with parent-child selects, how to create a Select All checkbox with Svelte actions and Svelte components, how to integrate external libraries (Editor.js) into your forms using actions or custom components.

Advanced Form Validation

Learn how to validate your forms using Yup and Vest validation libraries. We go through basic, advanced, instant and async validation scenarios. You learn how to validate forms by calling an API to check username availability and if the chosen password has been compromised. You will learn the difference between Yup and Vest and their trade-offs.

Build Your Own Forms Library

Learn how to build a complete forms library in 100 LOC using nothing, but Svelte. The forms library is validation library agnostic, supports calculator fields, has initial (optional) form validation, processing indicator, and comes with a custom set of form components that will help you reduce the boilerplate code.

You will learn how Svelte's context, stores and slots work, how to create smart abstractions and also why using a forms library might not solve all your problems.

Bonus Examples

Blog Post Editor

Example of a full-blown blog post editor using Editor.js

Registration Form

Example of an advanced registration form with validation errors and warnings

Table Edit

Example of how to edit a table

Wizard Form

Example of a multi-step form using Robot FSM library and nested objects

Auto-Populate a Form

Example of form population based on a form field value

Sample Chapter

Take a look at the sample chapter and TOC if you are still unsure this book is for you.

Questions

Q: Will the examples translate to Sapper or SvelteKit?

Yes. Examples are targeting only Svelte compiler and don't use any framework dependent code or libraries, or have code that use browser specific globals such as the window object.

Q: Will you keep the book and examples up to date with new Svelte releases?

Yes. I work daily with Svelte and keep track of new updates and changes. If and when a new major version of Svelte comes out that is not backward compatible, I will update both the book and the examples.

What People Are Saying

Forms have always been a difficult issue to deal with on the web. But with wit and charm Ilia takes you through the ideas of building forms from a very simple level to more advanced ideas. Reading this book, I learned a lot about forms, and especially about forms in Svelte, and I believe any developer at any level would too!

- Conner Aldrich, Creator of JungleJS 

If you have ever looked for a book to understand Svelte with a real-life examples, this is the one. Thanks to a friendly tone, a book like this one is the best form of learning. Pun intended.

- Paweł Słomka, Full-Stack Developer and Svelte Convert

Form validation in JavaScript is tricky to get right. I loved how Ilia approaches validations balancing flexibility and ease of use. The book has ample amount of reference points for almost any scenario you would face working with forms, some apply even outside the world of Svelte.

- Evyatar Alush, Creator of Vest validation library

So happy you created this Ilia, page 51 loving it!

- Donovan, A Happy Customer

Very intuitive, clear and gives you an idea on how to include all possible types of input-controls, from simple input to editors, even for beginners like me.

- @taffit

This is a super awesome book!

- @markephillips