5 Practical React Projects by Nirmalya Ghosh

Author:Nirmalya Ghosh [Various]
Language: eng
Format: epub
Publisher: SitePoint
Published: 2017-08-08T23:00:00+00:00

As you can see, server-side validation prevents us from saving an incomplete contact. We're using the SubmissionError class to pass this.props.errors to the form, just in case you're wondering.

Now, finish filling in the form completely. After clicking save, we should be directed to the list page.

Client-side Validation with Redux Form

Let's take a look at how client-side validation can be implemented. Open contact-form and paste this code outside the ContactForm class. Also, update the default export as shown:

// src/components/contact-form.js … const validate = (values) => { const errors = {name:{}}; if(!values.name || !values.name.first) { errors.name.first = { message: 'You need to provide First Name' } } if(!values.phone) { errors.phone = { message: 'You need to provide a Phone number' } } else if(!/^\+(?:[0-9] ?){6,14}[0-9]$/.test(values.phone)) { errors.phone = { message: 'Phone number must be ➥ in International format' } } if(!values.email) { errors.email = { message: 'You need to provide an Email address' } } else if (!/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i. ➥test(values.email)) { errors.email = { message: 'Invalid email address' } } return errors; } … export default reduxForm({form: 'contact', validate}) ➥(ContactForm);

After saving the file, go back to the browser and try adding invalid data. This time, the client side validation blocks submitting of data to the server.

Download

Copyright Disclaimer:
This site does not store any files on its server. We only index and link to content provided by other sites. Please contact the content providers to delete copyright contents if any and email us, we'll remove relevant links or contents immediately.