Made withSvelteClip

Svelte Tutorial for Beginners #23 - Custom Form Validation

N

Net Ninja

Creator on the Svelte channel

Watch on YouTube ↗

19K viewsApr 22, 20208:50 runtime

Learn to implement custom form validation in your Svelte applications from scratch. This tutorial demonstrates a practical approach since Svelte lacks built-in validation. You'll see how to create reactive state variables to track errors and form validity, write validation logic…

Chapters

#svelte#clip#frontend

Svelte Custom Form Validation Strategy

Svelte does not include a built-in form validation library. This video demonstrates a straightforward, custom approach using Svelte's reactive capabilities.

Validation State Management

Two key state variables are created to manage the validation process:

**errors**: An object that mirrors the structure of the fields data object. Each property holds an error message string for the corresponding form field. If a field is valid, its corresponding error string is empty.
```
let errors = { question: '', answerA: '', answerB: '' };
```
**valid**: A boolean flag that tracks the overall validity of the form during a submission attempt.
```
let valid = false;
```

The Validation Process on Submit

The validation logic is contained within the submitHandler function.

Assume Validity: At the start of the handler, optimistically set valid = true;.
Validate Each Field: Sequentially check each field against its validation rules.
- Example: Check if the question is at least 5 characters long.
```
if (fields.question.trim().length < 5) {
  valid = false;
  errors.question = 'Question must be at least 5 characters long.';
}
```
Update State: If a field fails validation, set valid = false and populate the corresponding property in the errors object.

Important
If a field passes validation, its corresponding error message should be reset to an empty string (errors.question = '';). This ensures that error messages from previous invalid submissions are cleared once the user corrects the input.

Displaying Feedback to the User

Reactive error messages are displayed directly in the component's template.

Conditional Rendering: Place an element (e.g., a <div>) under each input to display its error. By binding its content to the errors object, Svelte will automatically show the message when it's populated and hide it when it's an empty string.
```
<input type="text" bind:value={fields.question}>
<div class="error">{errors.question}</div>
```
Conditional Submission: Wrap the final submission logic (e.g., dispatching an event or making an API call) in an if (valid) block. This prevents the form from being submitted if any validation checks have failed.
```
if (valid) {
  // Form is valid, proceed with submission
  console.log('Form submitted:', fields);
}
```
Styling: Use CSS to style the error messages for better user experience, making them visually distinct (e.g., with red text and bold font weight).

Setting Up State for Validation

okay then gank so what I'd like to do now is implement a bit of validation into this form so that for example we can add empty fields and it accepts that. So Svelte doesn't come with any out-of-the-box validation for forms and we have to use our own logic but that doesn't matter because it is pretty simple to do and that's what we're going to do in this video.

So right here where we fire the submit handler when the form is submitted, we're going to validate the question first of all, then validate answer a, then answer B. Okay. Now what I'm also going to do is create a new variable called errors and that is going to be an object which looks very similar to begin with to this fields object. And what we'll be doing is storing an error for the question in this property value, an error for answer a right here, and an error for answer B right here.

So we're tracking any errors as we validate each field as we go forth and if by the end of it we have an error in one of these fields we'll declare that the form is not valid and then we'll output that error in the relevant area down here in the form. So I hope that makes sense.

I'm also going to create another variable called valid and I'm going to set that equal to false to begin with. Now this value right here, valid is going to be a boolean and when the form is not valid it's going to be false, when the form is valid it's going to be true. Now to begin with when we first load the form we're going to assume that the form is false and then later on we'll make it true and it will only become false again if there is an error. Okay.

Implementing the Question Field Validation

Alright, and so how do we validate these different things? Well the first thing we're going to do actually is like I just say set valid equal to true. So when we submit the form before it does any kind of validation on any of the fields it's going to say well okay now the form is true to begin with. Now if any of these fail, if any of these validations fail, at that point we'll make valid false. All right.

So then, validate question. How do we validate this? Well we'll do an if check. So I'm going to say if fields which is this object right here because we're going to get the value of the question from the fields object. So if fields.question.trim() to take away any white space of the answer, .length, so how many characters, is less than five, then it's not going to be valid. So I want the question to be at least five characters long. So if this is true right here and it's less than five, it means that it's not valid because we don't want a question less than five characters long.

So at that point we're going to take valid and set it equal to false. We're also going to add an error to this property question in the errors object. So we'll say errors.question is going to be equal to some kind of value and that value is going to say 'Question must be at least five characters long.' Okay. So just some basic validation rather. Okay, so that's the first one done.

Resetting Errors on Successful Validation

Now in the else case down here, if this did pass then what I want to do is reset this so it's a blank string again. So I'm gonna say errors.question is going to be equal to an empty string. And the reason I'm doing that is because imagine we submit the form right and at first this is false so it's not valid and we set the question to be this thing right here. Now imagine we rectify that and we submit it again and now this is fine but another field is not valid. Well because this one's fine I want to reset the error on the question to be an empty string so we don't repeat that validation feedback to the user, we just output the validation that the user needs. So that's that little bit.

Validating the Answer Fields

I'm gonna now copy all of this and paste it down here so we can do answer a. And for this the validation is going to be that the length has to be more than one character now, or at least one character rather. Now it can be one character because the question could just be 'what's your favorite letter, A or B'. I know that's a stupid poll but you could have one character answers I suppose. So again, if this is false right here we need to say that okay the form is no longer valid, so we set valid equal to false. Then we want to update this thing right here to answerA, and by the way this needs to be answerA as well. And we need to say, get rid of all that in fact, 'Answer A cannot be empty'. Okay, and this needs to change to answerA as well. Alright, so that's answer A validation done. Answer B is going to be very similar, so we just need to change this and this and this to answerB, and then answerB over here as well. And now we're sorted.

Conditional Submission and Displaying Errors

So when we submit the form now we start off with valid being true. If any of these fail right here, any of them at all, valid becomes false and we add an error to this object right here for that field. So at the end of it we're going to have all the errors in here. Now there might only be one, there might only be one error for example for answer a, or there could be two. Either way we're going to have an object with all of those errors.

So first of all what I'm gonna do at the bottom is a little comment to say okay, at this point we want to add a new poll, right, but we only want to add it if valid is true. So if (valid) then at this point we'll console.log and we'll say valid so we know it's valid, and we'll output the fields object so what our user typed in. Now at this point in the future we're actually going to add that new poll to an array of data, but for now we're just logging it to the console.

Now if it's not valid it's not going to do this and instead we now have this object which is populated with errors so we could output that down here in the different form fields. So what I'm going to do is a little div beneath each of the inputs and it's going to have a class of error and inside this one we'll do errors.question. So that's this object over here errors, and we're grabbing the question property. Now if it's an empty string because that field was valid we won't see anything, but if we have added this error then we'll see this right here. Okay.

Binding Errors to the Template

So if there's an error with this field then we'll see that feedback right here. Now we're going to copy that and paste it alright down here and also below the other one. And I'm gonna change this to answerA and this one to answerB like so. So if I save this now and come over here and try to add a new poll, if I try to add this then none of the fields are going to be valid and we get this error feedback right here for each one of the fields and nothing is logged to the console right here because the form is not valid. Okay.

Now if I rectify this one, if I add in a poll question, add poll, now this becomes valid and these two right here are still invalid but the top error has gone away. So if I do answer B, add poll, that goes away, and answer A, that goes away. And now we can see the form is valid and we get this object right here which is what our user has entered in the question, the answer a and answer B. So we can use that to later add it to an array of data.

Styling the Error Messages and Final Test

So that's pretty much it. There is one more thing I want to do and that is just to style this error class a little bit so it looks a bit better. Maybe colorize it so it's red or something like that. So error font weight first of all is going to be bold and the font size is going to be a bit smaller, 12 pixels, and then the color is going to be that red color which is not in this component. I think it's in one of the others. Let me go to tabs and copy and paste that color because I'm super lazy and then paste it all right here. Save it and let's check this out. So add a new poll and we can see now those new styles are right here.

So let's try this make sure everything works. Okay, this needs to be at least 5 characters long. Yep, everything still works. Awesome. So there we go. Now we have some custom form validation for our form. In the next video we're going to look at how we can take this and actually add a new poll to an array of data.