Table of Contents
Get this article emailed to you .
GitHub repository: https://github.com/JustinyAhin/sveltekit-zod-form-validation
If you have ever built a form with SvelteKit, you already know that the experience is quite amazing. The framework provides a lot of tools to help you build forms, make requests, and pass data between the client and the server. You can make that experience even better by using type safe validation for your forms with Zod.
But first, what is Zod?
Here is a quick example of what Zod can do for you:
You can use a
block to catch the error to avoid your application crashing, or use Zod
to avoid throwing an error.
Now that you have a basic understanding of what Zod is, let’s see how we can use it to validate our SvelteKit forms.
What are we building?
For the purpose of this post, we will build a simple software engineers talent directory application. Users will be able to use a form to add their profile to the directory. To keep things simple and focused on the topic, we will not handle things like authentication and authorization.
Basic structure for our SvelteKit project
Our project basically consists of a root
that contains our app form and a
server route to handle the form submission and validation.
Notice here that I used the
to enable progressive enhancement for our form. All the forms fields are required, and we will use Zod to make sure this is respected.
In my page server route, I declare the schema for a talent profile.
It is also possible to customize the error messages that Zod returns, like this:
to remove any whitespace from the string before validating it. We also use
to make sure the string is not empty.
I can now use these in my SvelteKit form actions to handle the form submission and validation.
In the snippet above, we get the form data from the request, and safely parse it using our predefined schema (remember, safe parsing will not throw an error).
Here’s what the console output looks like after submitting correct data through the form:
We can simulate incorrect data submission by removing the
attribute from the
We now have a bit of idea of how we will use the
method to validate our form data.
Handling form validation errors
Since Zod returns a
boolean and an
array, we can use these to create the necessary logic to handle form validation errors.
function comes in very handy here to return a validation error object to the client.
In the current state, we will not see any behavioral change in the client side after we submit incorrect data through the form. That’s because, even if we return a validation error object, our client doesn’t know yet how to handle it.
Let’s fix that by adding a bit of client side logic.
Here, we use the
variable (it needs to be named
for the form actions to work) to log the form data to the console. We also use the
syntax to log the form data to the console whenever it changes.
Let’s generate and display some error messages based on the
We now get these nice error notices after submitting incorrect data through the form:
Out of the box, SvelteKit already provides a ton of useful features to handle forms submission and validation. Adding Zod to that mix makes it even more powerful. The possibilities are endless.