Sometimes, we need to be able to access values of a form while evaluating another part of the form. For example, we may need to compare a password with a confirmation password to ensure they match each other. Let’s find out how to do this with redux-form.
Instructor: [00:00] Often when using validation, we may want to access values of other fields in our form. A classic example of this is password and password confirmation, because the password confirmation field needs to know what the value of the password field is.
[00:17] Let's head to our register form. We're going to add two new fields, both of them text inputs which are using our custom input component. We'll place them underneath the user name field.
[00:31] We'll have a password field, which is required, and a confirm password field, which is required, but also has to match the password.
[00:48] We're going to write a function called Matches Password in our validation. This technique uses field-level validation, but we could also use the other way of achieving validation in Redux Form, which is to write a validation object.
[01:02] For field-level validation, let's head over to our validation/index.js file, where we've written our other validation functions. We're going to add a function down here, which is password.
[01:19] Instead of just taking a value, it's also going to take all values. Redux Form provides all of the values of the form to this validation function, and we can say, "If the value matches all values.password, then no problem. Otherwise, passwords must match," and we can import this function in our register form.
[01:51] Let's save and refresh now. Here are our two new fields. We'll add a password value, and I'll write the confirmation now.
[02:04] They match, so we have two valid fields now. If they don't match, then we get our error message. Of course, for this situation, we're going to make both of these fields type password to ensure that we can't see the password being entered as it's written.
Member comments are a way for members to communicate, interact, and ask questions about a lesson.
The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on egghead.io
Be on-Topic
Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at support@egghead.io.
Avoid meta-discussion
Code Problems?
Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context
Details and Context
Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!