Join egghead, unlock knowledge.

Want more egghead? It's 45% off for a limited time only!

This lesson is for members. Join us? Get access to all 3,000+ tutorials + a community with expert developers around the world.

Unlock All Content for 45% Off

Already subscribed? Sign In

Save 45% for a limited time.

Get access to all courses and lessons on egghead today.

Autoplay

    Access Other Values of the Current Form with redux-form

    Rory SmithRory Smith

    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.

    reactReact
    ^16.0.0
    reduxRedux
    ^3.0.0
    Code

    Code

    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson
    Transcript

    Transcript

    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.

    Discuss

    Discuss