DEV Community

Cover image for How to validate form in ReactJS?
Chetan Rohilla
Chetan Rohilla

Posted on • Edited on • Originally published at w3courses.org

5 1

How to validate form in ReactJS?

In this tutorial we will use props, state, constructor, events in reactjs.

First of all create your component like Signup and extend it from Component Class (Import Component From react).

  • Now, Add Constructor to our component.
  • Create a function handleChange that will trigger on change of form field.
  • Create a function handleSubmit that will trigger on form submit.
  • Show the errors on Template inside render method and Create Form.

Here below is complete code.

import { Component } from "react";

class Signup extends Component {

    constructor(props) {
        super(props);
        this.state = {
            fullName: null,
            email: null,
            password: null,
            errors: {
                fullName: '',
                email: '',
                password: '',
            }
        };
    }


    handleChange = (event) => {

        event.preventDefault();

        const validEmailRegex =
            RegExp(/^(([^<>()\[\]\.,;:\s@\"]+(\.[^<>()\[\]\.,;:\s@\"]+)*)|(\".+\"))@(([^<>()[\]\.,;:\s@\"]+\.)+[^<>()[\]\.,;:\s@\"]{2,})$/i);

        const { name, value } = event.target;
        let errors = this.state.errors;

        switch (name) {
            case 'fullName':
                errors.fullName =
                    value.length < 5
                        ? 'Full Name must be 5 characters long!'
                        : '';
                break;
            case 'email':
                errors.email =
                    validEmailRegex.test(value)
                        ? ''
                        : 'Email is not valid!';
                break;
            case 'password':
                errors.password =
                    value.length < 8
                        ? 'Password must be 8 characters long!'
                        : '';
                break;
            default:
                break;
        }

        this.setState({ errors, [name]: value }, () => {
            console.log(errors)
        })
    }


    handleSubmit = (event) => {

        event.preventDefault();

        const validateForm = (errors) => {
            let valid = true;
            Object.values(errors).forEach(
                // if we have an error string set valid to false
                (val) => val.length > 0 && (valid = false)
            );
            return valid;
        }

        if (validateForm(this.state.errors)) {
            console.info('Valid Form')
        } else {
            console.error('Invalid Form')
        }
    }


    render() {
        console.log(this.props);
        return ( 
            <div>
                <form onSubmit={(event) => this.handleSubmit(event)}>
                    <input type="text" name="fullName" onChange={(event) => this.handleChange(event)} />
                    {errors.fullName.length > 0 &&
                        <span className='error'>{errors.fullName}</span>}

                    <input type="email" name="email" onChange={(event) => this.handleChange(event)}/>
                    {errors.email.length > 0 &&
                        <span className='error'>{errors.email}</span>}

                    <input type="password" name="password" onChange={(event) => this.handleChange(event)}/>

                    {errors.password.length > 0 &&
                        <span className='error'>{errors.password}</span>}

                    <input type="submit" name="submit" />
                </form>

            </div>

        );
    }
}

export default Signup;

Enter fullscreen mode Exit fullscreen mode

Please like share subscribe and give positive feedback to motivate me to write more for you.

For more tutorials please visit my website.

Thanks:)
Happy Coding:)

Reinvent your career. Join DEV.

It takes one minute and is worth it for your career.

Get started

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

👋 Kindness is contagious

Dive into an ocean of knowledge with this thought-provoking post, revered deeply within the supportive DEV Community. Developers of all levels are welcome to join and enhance our collective intelligence.

Saying a simple "thank you" can brighten someone's day. Share your gratitude in the comments below!

On DEV, sharing ideas eases our path and fortifies our community connections. Found this helpful? Sending a quick thanks to the author can be profoundly valued.

Okay