Want more egghead?

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

Unlock This Lesson

Already subscribed? Sign In

Autoplay

    Use Asynchronous Validation after Submitting a Form in redux-form

    Rory SmithRory Smith

    After the user hits the ‘Submit’ button of a form, we may want to perform some server-side validation which involves checking our database to evaluate the validity of our 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 let's add some submit validation to our form. When the user hits submit, we're going to check if their user name already exists and return an appropriate error message. To do this, we firstly need to import submission error from Redux Form inside our app component, which is used to differentiate IO errors from validation errors.

    00:26 Inside our submit method, which is being fired on submit, we're going to add an if statement. The alert that we have down here is going to come in the else section. Here's where we're going to check to see if the user name is available. In the real world, we would query our database, but for the sake of this example, we'll mark some already-taken user names.

    00:57 If our user name is one of those, then we want to throw a new submission error, passing in an object, and the object keys must pertain to form field names, in this case, user name, and the value can be an appropriate error message. Let's save and refresh. We'll add some example values.

    01:27 I've used a user name which is already taken. I'll hit submit. Here's the appropriate error message...

    Discuss

    Discuss