React Js Form Input Control Lowercase Validation Tutorial

Throughout this informative guide, you will learn how to implement lowercase validation to form input control using react useState hooks, bootstrap library in React app from scratch.

To validate lowercase text input in react, we will use react hook, and to simplify lowercase validation, we will be using a function component.

The useState hooks are typically used to manage state in function component.

We will use this hook to manage the input control state that tracks the value update.

We will show the success and error message for lowercase validation based on the value entered in the text input control.

How to Implement Lowercase Validation to Input Control in React using Hooks

  • Step 1: Build React App
  • Step 2: Add Bootstrap UI
  • Step 3: Create Form Component
  • Step 4: Add Lowercase Validation in Text Input
  • Step 5: Inject Component in App
  • Step 6: Run Development Server

Build React App

We will start the guide with creating a basic react app. You can build the app using the create-react-app tool.

npx create-react-app react-dev

Use command to move into the app folder.

cd react-dev

Add Bootstrap UI

In this step, you have to add the bootstrap ui library in react app.

You may ignore this library if you want to use custom CSS for styling the form.

npm install bootstrap

Create Form Component

Let’s make the components/ directory in our react project.

You have to insert the given code in BasicForm.js file in order to form the new component.

import React from 'react'

export default function BasicForm() {
  return (
    <div>
      
    </div>
  )
}

Add Lowercase Validation in Text Input

In this step, you have to open the BasicForm.js, then copy the following code line by line and add into the basic form component.

import React, { useState } from 'react'

export default function Form() {
  const [textVal, setVal] = useState('')
  const [isError, setError] = useState(null)
  const [isValid, setValid] = useState(null)

  function onChange(event) {
    const { value } = event.target
    setVal(value)
    const validLowercase = value === value.toLowerCase()
    if (validLowercase) {
      setValid(value.length ? `${value} is lowercase` : null)
      setError(null)
    } else {
      setError('Value mst be in lowercase')
      setValid(null)
    }
  }

  function onSubmit(event) {
    event.preventDefault()
    console.log(`${textVal} is lowercase value`)
  }
  return (
    <div>
      <h2 className="mb-4">Lowercase Input Validation in React Example</h2>
      <form onSubmit={onSubmit}>
        <div>
          <label className="mb-2">
            <strong>User: </strong>
          </label>
          <input
            id="userInput"
            type="text"
            value={textVal}
            className="form-control"
            onChange={onChange}
          />
        </div>

        <button
          type="submit"
          className="btn btn-dark mt-3"
          disabled={Boolean(isError) || textVal.length < 1}
        >
          Store
        </button>

        {isError && (
          <p className="text-danger mt-3" role="alert">
            {isError}
          </p>
        )}

        {isValid && (
          <p className="text-success mt-3" role="alert">
            {isValid}
          </p>
        )}
      </form>
    </div>
  )
}

Inject Component in App

In this step, we will be doing two things add the bootstrap css and the form component in src/App.js file.

import React from 'react'
import 'bootstrap/dist/css/bootstrap.min.css'

import BasicForm from './components/BasicForm'


export default function App() {
  return (
    <div className='container'>
      <BasicForm />
    </div>
  )
}

Run Development Server

Now the lowercase validation is fully implemented in react, you can test it now.

Make sure to start the development server using the given command.

npm start

Open the following url on the browser to view the app.

http://localhost:3000

React Js Form Input Control Lowercase Validation Tutorial

Final Thought

In this simple tutorial, we explained how to create a custom lowercase validation for text input control.

We took the help of react hook and bootstrap module to add integrate the lowercase validation in react.

We hope you like this guide and share it with others.