React js Form Validation Example

React js Form Validation Example

React js Form Validation Example – One of the things you should be aware of in the way I set you up is that we describe three types of inputs. We have the username, email input and password. It is very important to use the right type for each entry because it will help to complete their forms and allow password entry.

We will build our React js form validation from this point and make all the JavaScript concepts itself. At the moment the form does not send or work anyway, it is only in style.

Read Also :  How to Use Strict Mode in React

The form verification in React allows an error message to be displayed if the user has not completed the form correctly with the expected input method.

There are several ways to verify forms in React; however, this gun will focus on building a certification function with verification rules.

The code below assumes that the user is familiar with the process and resources required to make the React form. The form verification rules are applied as we change the input handling function from users.

Read Also :  Get Current Date Month Year in React js

React js Form Validation Example

Indes.js

import React, { Component } from 'react'
import ReactDOM from 'react-dom'
import Register from './Register'
export default class Demo extends Component {

    render() {
        return (
                <Register />
        )
    }
}

ReactDOM.render(<Demo />,document.getElementById("root"));

Register.js

import React, { Component } from 'react'

export default class Register extends Component {

    state = {
        errors :{
            username : "",
            email : "",
            pwd : ""
        }
    }

    changeHandler(event){
        let name = event.target.name;
        let value = event.target.value;
        let errors = this.state.errors;
        switch (name) {

            case "username":
                errors.username = value.length < 5 ? "Username Must be 5 charecter" : "";
                break;

            case "email":
                var pattern = new RegExp(/^(("[\w-\s]+")|([\w-]+(?:\.[\w-]+)*)|("[\w-\s]+")([\w-]+(?:\.[\w-]+)*))(@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$)|(@\[?((25[0-5]\.|2[0-4][0-9]\.|1[0-9]{2}\.|[0-9]{1,2}\.))((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\.){2}(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\]?$)/i);
                    if (!pattern.test(value)) {
                        errors.email = "Please enter valid email address.";
                    }else{
                        errors.email = ""; 
                    }
                break;

            case "pwd":
                errors.pwd = value.length < 5 ? "Username Must be 5 charecter" : "";
                break;
            default:
                break;
        }

        this.setState({errors,[name] : value});

    }

    render() {
        const {errors} = this.state;
        return (
            <div>
                <form>
                    <p>{errors.username}</p>
                    <input type="text" name="username" placeholder="Enter Username" onChange={this.changeHandler.bind(this)} />
                    <br /><br />

                    <p>{errors.email}</p>
                    <input type="text" name="email" placeholder="Enter Email" onChange={this.changeHandler.bind(this)} />
                    <br /><br />

                    <p>{errors.pwd}</p>
                    <input type="password" name="pwd" placeholder="Enter Password" onChange={this.changeHandler.bind(this)} />
                    <br /><br />

                    <input type="submit" value="Register" />
                </form>
            </div>
        );
    }
}