React JS Tutorial-Validate URL Using Regular Expression Example

React JS Tutorial: Input URL Validation-

Throughout this guide, we will learn to implement URL validation in React JS applications by simply using the Javascript regular expressions.

To validate the URL in React, we will be using the RegEx() and test() methods along with the React JS state object. We will learn step by step how to create the simple input type validation in React.

The RegEx() method is a handy method provided by Javascript. It is commonly known as a regular expression. It is an object the represents a pattern of characters and is ideally used for pattern matching and “search-and-replace” functions for text.

On the contrary, the test() method tests a match in a string. If it detects a match, then it returns true, else returns false.

 

Learn To Use Regular Expression To Validate URL In React JS

Following are the steps for implementing the above-mentioned:

1. Create React Project

2. Create Component File

3. Validate URL With Regular Expression

4. Update App JS File

5. Start React App

 

Step 1- Create React Project

IN the very first step, we have to install the new React application with the help of “npx create” command:

npx create-react-app react-blog

 

So, after we have installed the new React app, we will move into the project folder:

cd react-blog

 

Step 2- Create Component File

Here, we require to create a components/folder; within this folder, we create the UrlComponent.js file and then create the UrlComponent class.

import React, { Component } from "react";

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

export default UrlComponent;u

 

Step 3- Validate URL With Regular Expression In React

For integrating the image crop in React native, we will add the provided code inside the components/UrlComponent.js file:

import React, { Component } from "react";

class UrlComponent extends Component {
  state = {
    URL: "",
    isTrueVal: false
  };

  urlPatternValidation = URL => {
    const regex = new RegExp('(https?://)?([\\da-z.-]+)\\.([a-z.]{2,6})[/\\w .-]*/?');    
    return regex.test(URL);
  };

  changeUrl = event => {
    const { value } = event.target;
    const isTrueVal = !value || this.urlPatternValidation(value);

    this.setState({
      URL: value,
      isTrueVal
    });
  };

  onSubmit = () => {
    const { URL } = this.state;
    console.log("Here is the site url: ", URL);
  };

  render() {
    const { isTrueVal, URL } = this.state;
    return (
      <div>
        <form>
          <input
            type="text"
            name="URL"
            value={URL}
            onChange={this.changeUrl}
          />
          {!this.state.isTrueVal && (
            <div style={{ color: "#F61C04" }}>URL is not valid.</div>
          )}
          <button onClick={this.onSubmit} disabled={!isTrueVal}>Store</button>
        </form>

      </div>
    );
  }
}

export default UrlComponent;

 

Let’s now understand the nuances of UrlComponent class, set the state with URL and isTrueVal, define the urlPatternValidation() function.

The function sets and checks the regular expression and returns a boolean value.

The changeUrl function helps update the state of URL and isTrueVal based on the value entered by the user. The render functions output the result and showing the error message when the user types value in the input field.

 

Step 4- Update App JS File

Here, we import the UrlComponent from ‘./components/UrlComponent’ and define the UrlComponent tag in the App function.

Then, we will open src/App.js and update the code into it:

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

import UrlComponent from './components/UrlComponent';

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

export default App;

Step 5- Start The React App

In this step, we will run the development server using the npm start command by using the following command:

npm start

 

Summary

So, friends, in this tutorial, we have learned URL validation that is integrated into React JS. We have also seen how to use RegEx and the test methods to implement pattern match validation in React.

 

Thanks