How to Validate React Js Input with White Space Validation

How to implement white space validation in React js? Well, Form validation is the process that strengthens the process of data accumulation from the user, and forms in React js are no different.

As a react js developer, you are responsible for knowing how things work regarding validating the form input fields.

We will create a basic form with a single input field, and add the white space validation in HTML input field. And, if the user somehow types the white space, we will display the white space validation error message.

This tutorial is for those who want to know how to integrate empty space validation in react js.

So, let’s get started.

React Js Empty Space Validation Example

  • Step 1: Create React App
  • Step 2: Set Up Bootstrap
  • Step 3: Add Empty Space Validation
  • Step 4: Register Component in App Js
  • Step 5: Test Application

Create React App

In the first step, you need to use create react app tool to install the react application. Type given command and evoke suggested command.

npx create-react-app test-app

New app has been generated, move into the app directory.

cd test-app

Set Up Bootstrap

In this step we will guide you how to set up bootstrap CSS package in react, just use the given command.

If you don’t want to use this package skip this step.

npm install bootstrap

You have to import the bootstrap CSS in the primary src/App.js file.

import '../node_modules/bootstrap/dist/css/bootstrap.min.css';

Add Empty Space Validation

Create new folder, name it components/ and within this folder create FormValidation.js and append the given code in the file.

import React, { Component } from "react";

class FormValidation extends Component {
  state = {
    val: "",
    isValid: false
  };

  patternValidation = val => {
    return /\s/g.test(val);
  };

  valChange = event => {
    const { value } = event.target;
    const isValid = this.patternValidation(value);

    this.setState({
        val: value,
      isValid
    });

    console.log(this.patternValidation(value))
  };

  onFormSubmit = () => {
    const { val } = this.state;
    console.log("Value: ", val);
  };

  render() {
    const { isValid, val } = this.state;
    return (
      <>
        <form>
         <div className="form-group">
            <input
              type="text"
              name="val"
              value={val}
              className="form-conrtol"
              onChange={this.valChange}
            />
            {this.state.isValid && (
              <div style={{ color: "red" }}>Empty spaces are not allowed.</div>
            )}
          </div>

          <button className="btn btn-dark mt-3" onClick={this.onFormSubmit}>Submit</button>
        </form>

      </>
    );
  }
}

export default FormValidation;

Register Component in App Js

In the next step, we require to register the newly built component into the src/App.js file.

import React from 'react';

import '../node_modules/bootstrap/dist/css/bootstrap.min.css';
import FormValidation from './components/FormValidation.js';

function App() {
  return (
    <div className="container App mt-5">
      <FormValidation />
    </div>
  );
}

export default App;

Start React App

The last step is significant because we need to run the react server. Hence, go with the given command to run the react app.

npm start

How to Validate React Js Input with White Space Validation

Summary

In this tutorial, we revealed how useful regular expression could be? It comes into play, especially when you prevent the user from entering the white or empty space.

However, you may also use the regex for other types of validations.

We looked deeply into the matter and used simple logic rather than complex one to render a string with non-breaking spaces in react.