Validating Form Data

Now that our system is accepting new birthdays, we need to validate the data coming in. In this chapter, we’ll see how we can test-drive the SvelteKit fail function to return useful information to the user so that they can correct any errors.

Figure 5.1 shows what is displayed to the user after the server has deemed their date of birth invalid. Notice how the invalid form data is maintained so that the user has a chance to correct it:

Figure 5.1 – A validation error is shown when entering an invalid date

This chapter covers the following key topics:

• Adding a Playwright test for validating form errors
• Displaying SvelteKit form errors
• Validating data in the form action
• Clearing the data store between tests

By the end of the chapter, you’ll have a good understanding of how to implement form validation using a test-driven approach.