React Js Regular Expression Input URL Validation Tutorial

URLs are online addresses of the sites that help you land on the particular site, which refers to the URL.

A URL stands for uniform resource locator. If you are a react js developer and don’t know how to check if the provided data in the input field is URL.

Then, don’t worry; we are here to help you implement URL validation in react js input type form field. This guide will explain how to validate URLs in React js using the regular expression and some custom functions from scratch.

How to Validate Input Type URL in React Js

  • Step 1: Create React App
  • Step 2: Install Bootstrap
  • Step 3: Integrate Url Validation
  • Step 4: Register Component in App Js
  • Step 5: Test Application

Create React App

Begin with creating a new react app; you can, however, ignore this step if you have already installed the app in advance.

npx create-react-app test-app

Go inside the project directory.

cd test-app

Install Bootstrap

Additionally, you may install and use the bootstrap CSS package in react application. Harness the power of Bootstrap and swiftly create the form UI in react app.

npm install bootstrap

You need to add or import the bootstrap CSS in the src/App.js file.

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

Integrate Url Validation

Create new components/ folder, in this folder all the componenets will stay.

Also, create the FormValidation.js file, and after that, insert the following code within the file.

import React, { Component } from "react";

class FormValidation extends Component {
  state = {
    URL: "",
    isInputValid: false
  };

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

  updateUrlVal = event => {
    const { value } = event.target;
    const isInputValid = !value || this.regextValidation(value);

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

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

  render() {
    const { isInputValid, URL } = this.state;
    return (
      <div>
        <form>
        <div className="form-group">
              <input
                type="text"
                name="URL"
                value={URL}
                className="form-conrtol"
                onChange={this.updateUrlVal}
              />
              {!this.state.isInputValid && (
                <div style={{ color: "#F61C04" }}>Entered value is not URL.</div>
              )}
          </div>
          <button className="btn btn-dark mt-3" onClick={this.onFormSubmit} disabled={!isInputValid}>Submit</button>
        </form>

      </div>
    );
  }
}

export default FormValidation;

Register Component in App Js

Now that form component is ready, it has to be added 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

Go to console, type the suggested command and invoke it to run the react development server.

npm start

React Js Regular Expression Input URL Validation Tutorial

Summary

Throughout this quick tutorial, we have seen some of the detailed steps which helped us understand how to validate or implement URL validation in react js application.