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.
Working with Forms in Svelte
Learn the basics of HTML forms, HTML5 validation, form extraction and the different ways to submit a form.
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.
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.
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.
Blog Post Editor
Example of a full-blown blog post editor using Editor.js
Example of an advanced registration form with validation errors and warnings
Example of how to edit a table
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
Take a look at the sample chapter and TOC if you are still unsure this book is for you.
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 SayingForms 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 JungleJSIf 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.
- Evyatar Alush, Creator of Vest validation librarySo happy you created this Ilia, page 51 loving it!
- Donovan, A Happy CustomerVery 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.
- @taffitAs a backend Typescript developer learning frontend Svelte forms, I could not stress how comprehensive and useful Ilia's Svelte Forms book was - one can easily get stuck in an endless sea of tutorial hell or Github spelunking. Ilia's blog is impossible to miss when setting up a sane project environment for Svelte, so it's no surprise that his Forms book does the same with succinct prose and clear examples.