Creating a Simple Form with Svelte
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.
Instructor: [0:00] Here, we have a simple form that takes a username and a password. On the form, let's add an onSubmit property with a modifier called preventDefault by using the pipe character. This will ensure that the form doesn't trigger a get request when submitted by default.
[0:15] Create the function called onSubmit that will handle our submit when the Sign in button is clicked. For now, this function will only log a "Hello" form to the console. Wire this function up by adding it as a value to the onSubmit directive.
[0:31] Open a console and click the Sign in button. We should now see Hello form being logged. Create a variable for the username, and one for the password. We will use the bind:value directive on the input field to capture the values entered.
[0:45] On the username field, let's add bind:value = {username}, and let's do the same on the password field with its corresponding variable name. Let's update our onSubmit function to now log out username and password.
[1:02] If we want to add client-side validation, we can use the browser's built-in validation capabilities. For the username, we can add a require property to the field. This will give us the browser's default validation error message. Let's remove the require property and create our own nicer looking validation message.
[1:17] Here's some code I just pasted. [inaudible] want our validation message to look like. Let's create a variable called errors and, in this variable, we will store a message for username, if it's empty. We will wrap our error message in an if tag which will check if the errors.username property is empty. If it's not, then we will display the message from the property using errors.username in between the <small> tags.
[1:42] We will need to handle the form validation inside of our onSubmit function since we don't want any information being printed to the console before username field is empty. We will check if username is undefined or if username.trim is empty. Then, we will assign a message to errors.username and return from this function so that the rest of the code won't continue.
[2:04] We will also need to reset the errors object before running the check in order for the message not to show when a value is entered. Now we would repeat this process for as many fields as there are.