How to add Validations to my Input Field in React JS

Question

I have a Input field to which I want to add validations. The conditions should be that amount cannot be 0 and should not enter any characters.

My React Code:

import React from 'react'
import { useState } from 'react';

function LoanInput() {

  const [loanAmount, setLoanAmount] = useState(0);

  const handleValidation = (e) => { 
    const formattedValue = (Number(e.target.value.replace(/\D/g, '')) || 0).toLocaleString();   
    setLoanAmount(formattedValue);
  }


  return (
    <div className="LoanAmountInput">
      <div className="LoanAmount">
        <label>Loan Amount</label>
        <input type="text" value={loanAmount} onChange={handleValidation} />
        <span style={{ color: "red" }}></span>
      </div>
    </div>
  );
}

export default LoanInput

Ashok · Accepted Answer · 2022-03-09 17:31:02Z

1

Actually, you can use the default validation provided by the browser using the input type. In your case, your code would be as follow:

<input type="number" min="1" value={loanAmount} />

Why this approach?

The browser takes care of the validation and input sanitization.
For mobile/tablet devices, it will show only numpad keyboard to the user for data input.

answered Mar 9, 2022 at 17:31

Ashok

2,7461 gold badge18 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

tenshi Over a year ago

this works but still needs back up validations in the backend as html attributes/element can be removed using inspect elements

Ashok Over a year ago

In case the user have altered the html attribute, generally the frontend should send the data to the server and the backend server should handle the validation. In case the data is not valid, server can send BAD_REQUEST as response.

Ashok Over a year ago

Note that, this kind of validation should not be done by the frontend, since there would be repetation of code Frontend-Web, Android, iOS, Windows App, Mac App, Linux App. So, in case you need to update the custom validation, you have to update all the applications. Hence generally it is recommended that the validation should be done at single place only i.e. backend server. At the server, you can try to parseInt the user provided value and accept/reject the API request based on data validation.

Collectives™ on Stack Overflow

How to add Validations to my Input Field in React JS

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related