August 15, 2020
React Js form Validation Tutorial Guide

React Js form Validation Tutorial Guide

React Js Form Validation has become a lot easier due to the npm packages available, otherwise it would have been a lot more challenging as react js form updation is being dynamically controlled. In this tutorial, we would be using two npm packages react-validation and validator. Here we are creating a signup form with input fields name, email, and phone number. Email validation is been done by using a validator library you can definitely skip the use of validator also and create your own email validation function. Follow the step by step tutorial and also don’t just copy-paste the code, try coding in your IDE for a better idea. So, let’s get started.

1.Install Packages

We are using npm install react-validation module for the validation. It provides 3 wrapper classes namely-Form, Input, Button that change the behavior of default tags form, input, button. Even some react js original basic forms features might not work efficiently because using a 3rd party module indeed restricts a bit, but in react js this is the easiest way to add validations.

React Js form Validation Tutorial | Steps

In this example, we are also using validator module for react js form validation in case of email. Installing this is optional and you can instead use your own js email validation function too.

React Js form Validation Tutorial | Steps

2.Create Validation Methods

We will first import the 3 components of react-validation in the app.js and then validator component for the email. In this react js form validation we are defining required validation, using validator for email and defining phone Number validation where 10 digits are required.

React Js form Validation Tutorial | Steps

import Form from ‘react-validation/build/form’;
import Input from ‘react-validation/build/input’;
import Button from ‘react-validation/build/button’;
import validator from ‘validator’;
import React, { Component } from ‘react’;
const required = (value) => {
  if (!value.toString().trim().length) {
    // We can return string or jsx as the ‘error’ prop for the validated Component
    return ‘Required’;
  }
};
const email = (value) => {
  if (!validator.isEmail(value)) {
    return `${value} is not a valid email.`
  }
};
const phoneNumber = (value) => {
  if (value.toString().trim().length!=10) {
    return `${value} is not a valid phone Number.`
  }
};

3. Using Validation in Form

The methods are written in app.js and so do the react js validation form in app.js, so both the screenshots are in continuation. As in the code in validations property of the Input tag, we are using required, email, and phone number validations.

React Js form Validation Tutorial | Steps

class App extends React.Component {
render() {
    return (
      <div>
        <h1>React Js Form Validation</h1>
        <Form>
            <h3>Login</h3>
            <div>
                <label>
                    Name*
                    <Input  name=’name’ validations={[required]}/>
                </label>
            </div>
            <div>
                <label>
                    Email*
                    <Input  name=’email’ validations={[required,email]}/>
                </label>
            </div>
            <div>
                <label>
                    Phone Number*
                    <Input  name=’email’ validations={[required,phoneNumber]}/>
                </label>
            </div>
            <div>
                <Button>Submit</Button>
            </div>
        </Form>;
      </div>   
    );
  }
}
export default App;

The code in index.js would remain the same

React Js form Validation Tutorial | Steps

4. Run the Code 

Now, how the code works is that if name is empty or phone number is invalid or email is incorrect the submit button would remain to be disabled as we are using Button, not button which has a special property in react js form validation and taken care by react-validation module.

npm start to load the application. Based on the same principle create your own methods for validation similarly. Here is link to official documentation https://www.npmjs.com/package/react-validation for reference.React Js form Validation Tutorial | Steps

This was a short tutorial on react js form validation which can be done without much knowledge of react js forms also.

Similar Posts:

 

 

admin

Engineer Diaries started with the need to bridge the huge gap in what we are taught vs what the industry demands. We are based in Delhi, India but our blog is for everyone, in and outside tech industry❤ Feel free to reach out to us at engineerdiaries@gmail.com for any business/personal query.

View all posts by admin →

Leave a Reply