React JS Tutorial-Input Field White/Empty Spaces Validation Example

React Tutorial: JS Input Field White/Empty Spaces Validation-

Throughout this guide, we will learn to remove white and empty spaces from the form input field in React JS application by simply using the regular expressions.

Let’s know what’s a regular expression. A regular expression means a collection of characters that define a search pattern. It is generally used for searching a particular pattern in a string and performs “find” and “find and replace” operations on strings or input validation.

We will get to know how to create a small component including an input field which will help us check whether there’s a white/empty space in the input field that will display the error message to the user.

 

Learn To Add White Spaces And Empty Spaces Validation In An Input Field In React JS

Following are the steps for implementing the above-mentioned:

1. Create React Project

2. Create Component File

3. No Space Validation

4. Update App JS File

5. Start React App

 

Step 1- Create React Project

In the very first step, we will install a React app by using create-react-app. It offers an easy-to-use environment for React project development. See below:

npx create-react-app react-blog

 

So, after installing the app, we will get inside the project directory:

cd react-blog

 

Step 2- Create Component File

In React, we can manage our app in smaller chunks. We require to create a components/folder; within this directory, all the components code go.

In addition, we have to create a new FormComponent.js file, add the below given code in the file:

import React, { Component } from "react";

class UrlComponent extends Component {
  render() {
    return (
      <div> </div>
    );
  }
}

export default UrlComponent;

 

Step 3- No Space Validation In React

In the third step, we will have to open components/FormComponent.js file and insert the given code in it:

import React, { Component } from "react";

class FormComponent extends Component {
  state = {
    stringVal: "",
    isValid: false
  };

  stringValPatternValidation = stringVal => {
    return /\s/g.test(stringVal);
  };

  changestringVal = event => {
    const { value } = event.target;
    const isValid = this.stringValPatternValidation(value);

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

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

  onSubmit = () => {
    const { stringVal } = this.state;
    console.log("Val: ", stringVal);
  };

  render() {
    const { isValid, stringVal } = this.state;
    return (
      <div>
        <form>
          <input
            type="text"
            name="stringVal"
            value={stringVal}
            onChange={this.changestringVal}
          />
          {this.state.isValid && (
            <div style={{ color: "#F61C04" }}>White or empty space is not allowed.</div>
          )}
          <button onClick={this.onSubmit}>Store</button>
        </form>

      </div>
    );
  }
}

export default FormComponent;

 

Step 4- Update App Js File

Here, we have to add the FormComponent in the main app js file. Therefore, we will open the src/App.js and update the following code inside the file:

import React from 'react';
import './App.css';

import FormComponent from './components/FormComponent';

function App() {
  return (
    <div className="App">
      <FormComponent />
    </div>
  );
}

export default App;

 

Step 5- Start the React App

Now, we have reached the point where we will view the app in the browser. For this, we have to start the development server using the given command:

npm start

Conclusion

In this tutorial, we have seen how to implement empty or white spaces validation in a React input field using the regular expression.

So, hopefully, you have understood how easy and simple it is to do it in a few steps.

 

Thanks