How to Add Lowercase Validation in Input Control in React

Last updated on: by Digamber

In this quick guide, we will share how to add lowercase text validation on an form input text control in React js application using react hooks.

We will create a simple form component; this React input lowercase example will show an error when the user enters the uppercase values in an input field. Similarly users will be shown a success message when all the values entered in an input field are lowercase.

We will create the function component and start with importing a useState hook; this hook will manage the state of the input control. Based on the various states, we will display the validation error and the success message regarding the input lowercase validation.

React Js Input Control Lowercase Validation Example

  • Step 1: Create React Project
  • Step 2: Install Bootstrap Module
  • Step 3: Implement Lowercase Validation
  • Step 4: Register Form Component
  • Step 5: Run React App

Create React Project

It is imperative to have a React project ready before we start coding in React world.

We assume you have already created the app; if not, no worries.

Here is the command that will help you eloquently generate a brand new react app on the fly.

npx create-react-app react-wsl

Next, jump into the react project folder.

cd react-wsl

Install Bootstrap Module

We are not going to spend our time designing the form element.

We decided to use the Bootstrap library for the designing task.

Therefore, you can use the given command to install the module.

npm install bootstrap

Next, get into the App.js, within this file you require to import the Bootstrap CSS.

import React from 'react'
import 'bootstrap/dist/css/bootstrap.min.css'
export default function App() {
  return (
    <></>
  )
}

Implement Lowercase Validation

Next, create the components/ folder, in here you might create and keep various components.

For the time being, we will create the Form.js component file.

Once the file is ready, paste the given code into the file.

import { useState } from 'react'
export default function Form() {
  const [inputVal, updateVal] = useState('')
  const [isError, initError] = useState(null)
  const [isValid, initValid] = useState(null)
  function initChange(event) {
    const { value } = event.target
    updateVal(value)
    const isLowercase = value === value.toLowerCase()
    if (isLowercase) {
      initValid(value.length ? `${value} is valid lowercase` : null)
      initError(null)
    } else {
      initError('Product name should be lowercase')
      initValid(null)
    }
  }
  function initSubmit(event) {
    event.preventDefault()
    window.alert(`${inputVal} is valid lowercase value`)
  }
  return (
    <div>
      <h2 className="mb-4">React Lowercase Text Input Validation Example</h2>
      <form onSubmit={initSubmit}>
        <div>
          <label className="mb-2">
            <strong>Product: </strong>
          </label>
          <input
            id="userInput"
            type="text"
            value={inputVal}
            className="form-control"
            onChange={initChange}
          />
        </div>
        <div className="d-grid mt-3">
          <button
            className="btn btn-danger"
            disabled={Boolean(isError) || inputVal.length < 1}
            type="submit"
          >
            Add
          </button>
        </div>
        {isError && (
          <div className="alert alert-danger mt-3" role="alert">
            {isError}
          </div>
        )}
        {isValid && (
          <div className="alert alert-success mt-3" role="alert">
            {isValid}
          </div>
        )}
      </form>
    </div>
  )
}

Register Form Component

Head over to the src/App.js, now in this file you have to import the component at the top also define the component tag in the app function.

import React from 'react'
import 'bootstrap/dist/css/bootstrap.min.css'
import Form from './components/Form'
export default function App() {
  return (
    <div className='container mt-5'>
      <Form />
    </div>
  )
}

Run React App

Up until now, we have created the simple form component holding the simple form input text field.

To check the lowercase validation, we must start the react app.

Here is the single command that will start the react server for you.

npm start

You may use the following url to view the react app on the browser.

http://localhost:3000

How to Add Lowercase Validation in Input Control in React

Conclusion

In this quick React client-side form validation tutorial, we have revealed significant information on how to add lowercase validation to the form input control text field.

To apply the lowercase validation on an input field, we used the React hooks, which helped us manage the state of input control on various lifecycles of the component.

Moreover, you have also learned how to design a form input control using the Bootstrap form UI component. Hope you will like this guide, have a good day.

Digamber

I am Digamber, a full-stack developer and fitness aficionado. I created this site to bestow my coding experience with newbie programmers. I love to write on JavaScript, ECMAScript, React, Angular, Vue, Laravel.