Validate form values with React Final Form 'validate' function
Most forms require some sort of validation, for instance we'd like to check whether the password is empty, is long enough etc.
In this lesson we are going to learn how to use the validate prop from react-final-form Form component to validate form values whenever they change and to display helpful error messages to users.
Instructor: [00:00] We have a simple form which allows us to input our password. We have a text input for the password, and we also have a submit button. The issue is that right now, our form isn't very secure. I can put anything in here and click submit.
[00:14] What we would like to do is to check whether the password is not empty, or if it's long enough in order to submit. To add validation to your react-final-form form, use the validate prop from the form component.
[00:27] The validate prop receives a function which is going to get the current values of the form as arguments. Next, create an object containing the form errors. Whenever there's no password, we're going to have an error message saying the password is empty.
[00:43] Whenever the password is not empty, but is too short, we're going to have a message that the password is too short. We are going to also console.log this object and return it. Let's open up dev tools and refresh the page.
[00:57] By default, we have a message that the password is empty. If I put in a password, hello, we're going to get a message that password is not empty, but it's still too short. We would like to display those messages to the user.
[01:09] To display those messages to our users, we need to convert this field component to a component which uses render props. This time, the field component is going to have a function inside of it. We're going to destructure the input and meta property from it, and we're going to return a div.
[01:29] Inside of this div, we're going to have another div for both label and input. Let's start with label. It could HTML for password. We're going to say password. We're also going to have a name password for our field over here.
[01:44] We are also going to need the input element. Inside of the input, we need to destructure the input object that we got from props over here. We're also going to set a placeholder to say "a very secure password." Let me format that.
[01:59] Let's remove this old field component for now. We're also going to have another div for our arrows. Inside of it, we're going to use the meta property from react-final-form. Whenever something went wrong and the form was also touched, we're going to display a span which is going to display the error message, so meta.error.
[02:24] Let me format that. Let's remove this additional label, and now, we can test our form. Currently, the form is empty. If I click submit, I get the message, "Password is empty." The word "password" actually as eight letters.
[02:38] If I type in "passwor," currently the password is too short. If I add the D, we're going to have "password," which is eight currently, and it's long enough. The reason it works is because react-final-form runs the validate function whenever something has changed in our form.
[02:58] If you have values, and the values are long enough, we are not going to get those error messages. They are not going to be displayed because the meta error is empty. If we have error messages, this mechanism allows us to display them.