Join egghead, unlock knowledge.

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
Become a member
to unlock all features

Level Up!

Access all courses & lessons on egghead today and lock-in your price for life.


    Use Asynchronous Validation after Submitting a Form in redux-form


    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.



    Become a Member to view code

    You must be a Pro 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
    orLog In




    Instructor: 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.

    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.

    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.

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