All right, let's begin this lesson by removing the manual button we added in the last lesson, and then setting actions false back to true, or actually just removing that altogether. This way FormKit can handle that form submission button for us again. Now, a common need for forms is providing validation on each of the inputs to ensure the user is providing proper data. FormKit makes validation easy by exposing a validation prop on each of the inputs.
The value for this prop can be any number of built-in validation rules, as well as any custom rules you'd like to define yourself. Let's take a look at the built-in required rule. This tells FormKit that the user cannot submit the form with this field blank. Let's give it a try over in the browser.
If I remove the value from my field and then blur it, we get this nice convenient error message telling us that the username is required. It's located right under the field it pertains to, and as soon as I type anything at all in username, it disappears again. So this is really specific and valuable feedback for our users. If you'd like to further customize how these errors show, You can use the validation visibility prop provided by FormKit.
The default value for this prop is blur, which means that the validation message will show after the user blurs the input, which we just saw a moment ago. You could also provide live, which means the errors are always visible. And to be honest, that's not the best choice in my opinion, but you have the choice available. You can also provide dirty, which means the errors are shown only after the user modifies the value of an input.
Finally, you could also set validation visibility to submit, which means that the error messages will only be shown after the user attempts to submit the form. Perhaps best of all is that if we try to submit this form with username blank, our submission handler never fires at all. So it's impossible to submit the form with invalid values. That also means we don't have to do some kind of custom thing inside of our submit handler, where we check first to see if the form is valid, and then only continue if it is.
js, you know that this is a pretty common thing you have to do, but no more. Besides the required rule, there are a lot of other rules available as well. For instance, you could provide the URL rule and this means the input would need a valid URL with HTTP or whatever there at the beginning and dot whatever the top level domain is at the end. You can also provide multiple rules for a single field by separating them with a pipe.
Now the username field is both required and should be a URL. Notice that as soon as I put required in, the error message popped up on the left hand side. That's because without the required rule, all of the rules do allow for an empty message. So yes, this means it must be a valid URL, but it could also be blank.
So many times you'll pair required with some other kind of formatting rule. You can also pass arguments to rules. For instance, there is a length rule, Where you can specify a minimum length of characters. Let's give this one a try now over on the left hand side So right now we have username is required Because the input is empty I'll put in a single character and now we have please include a valid URL We don't have a message about our input being too short.
That's actually very good to know What that means is that these rules are? run in sequence So required was first, and then URL, and only then length. Our value is in violation of both URL and length. But because URL is specified first, the length one has not run yet.
So let's provide a valid URL now, and then the error message goes away. But let's increase the length to something that encompasses that URL, maybe 16. And now we get the error message username must be greater than or equal to 16 characters. Really nice.
We can even provide multiple arguments to length to specify a maximum character count. Notice how nicely the error message conforms to the parameters on our rule. Let's try making the URL conform to the rule. io.
As soon as I hit at least 16 characters, the message disappears. Besides this syntax for defining the rules, we can also provide them as an array. Each element within the array is also an array, where the first element is the rule name. For those rules that don't have any arguments, this is enough.
For those rules that do require arguments, you can provide those arguments as additional elements on the array. Over in the browser, if I add more to this input, the rules work just as before. If you'd like to see what all rules are baked into FormKit, you can check out the documentation and it's got a list of all the available rules. There's quite a few here that could be handy.
For instance, there's a between rule here. And when I click on that, we get this nice example of how to use it. So this checks to see if a number input is between two different values. There are even more advanced rules like confirm.
This allows you to do things like have rules based on the value of other inputs, such as a password confirm rule where you have to make sure both of these inputs have the same value in them. There's really a ton of different common ones available, but if you can't find one that you need here, writing your own custom rule is actually fairly straightforward, and we'll take a look at that in a later lesson. All right, let's begin this lesson by removing the manual button we added in the last lesson, and then setting actions false back to true, or actually just removing that altogether. This way FormKit can handle that form submission button for us again.
Now, a common need for forms is providing validation on each of the inputs to ensure the user is providing proper data. FormKit makes validation easy by exposing a validation prop on each of the inputs. The value for this prop can be any number of built-in validation rules, as well as any custom rules you'd like to define yourself. Let's take a look at the built-in required rule.
This tells FormKit that the user cannot submit the form with this field blank. Let's give it a try over in the browser. If I remove the value from my field and then blur it, we get this nice convenient error message telling us that the username is required. It's located right under the field it pertains to, and as soon as I type anything at all in username, it disappears again.
So this is really specific and valuable feedback for our users. If you'd like to further customize how these errors show, You can use the validation visibility prop provided by FormKit. The default value for this prop is blur, which means that the validation message will show after the user blurs the input, which we just saw a moment ago. You could also provide live, which means the errors are always visible.
And to be honest, that's not the best choice in my opinion, but you have the choice available. You can also provide dirty, which means the errors are shown only after the user modifies the value of an input. Finally, you could also set validation visibility to submit, which means that the error messages will only be shown after the user attempts to submit the form. Perhaps best of all is that if we try to submit this form with username blank, our submission handler never fires at all.
So it's impossible to submit the form with invalid values. That also means we don't have to do some kind of custom thing inside of our submit handler, where we check first to see if the form is valid, and then only continue if it is. js, you know that this is a pretty common thing you have to do, but no more. Besides the required rule, there are a lot of other rules available as well.
For instance, you could provide the URL rule and this means the input would need a valid URL with HTTP or whatever there at the beginning and dot whatever the top level domain is at the end. You can also provide multiple rules for a single field by separating them with a pipe. Now the username field is both required and should be a URL. Notice that as soon as I put required in, the error message popped up on the left hand side.
That's because without the required rule, all of the rules do allow for an empty message. So yes, this means it must be a valid URL, but it could also be blank. So many times you'll pair required with some other kind of formatting rule. You can also pass arguments to rules.
For instance, there is a length rule, Where you can specify a minimum length of characters. Let's give this one a try now over on the left hand side So right now we have username is required Because the input is empty I'll put in a single character and now we have please include a valid URL We don't have a message about our input being too short. That's actually very good to know What that means is that these rules are? run in sequence So required was first, and then URL, and only then length.
Our value is in violation of both URL and length. But because URL is specified first, the length one has not run yet. So let's provide a valid URL now, and then the error message goes away. But let's increase the length to something that encompasses that URL, maybe 16.
And now we get the error message username must be greater than or equal to 16 characters. Really nice. We can even provide multiple arguments to length to specify a maximum character count. Notice how nicely the error message conforms to the parameters on our rule.
Let's try making the URL conform to the rule. io. As soon as I hit at least 16 characters, the message disappears. Besides this syntax for defining the rules, we can also provide them as an array.
Each element within the array is also an array, where the first element is the rule name. For those rules that don't have any arguments, this is enough. For those rules that do require arguments, you can provide those arguments as additional elements on the array. Over in the browser, if I add more to this input, the rules work just as before.
If you'd like to see what all rules are baked into FormKit, you can check out the documentation and it's got a list of all the available rules. There's quite a few here that could be handy. For instance, there's a between rule here. And when I click on that, we get this nice example of how to use it.
So this checks to see if a number input is between two different values. There are even more advanced rules like confirm. This allows you to do things like have rules based on the value of other inputs, such as a password confirm rule where you have to make sure both of these inputs have the same value in them. There's really a ton of different common ones available, but if you can't find one that you need here, writing your own custom rule is actually fairly straightforward, and we'll take a look at that in a later lesson.