How to validate numeric inputs in ReactJS

Question

In Django you can easily use MinValueValidator and MaxValueValidator to validate IntergerFields.
What is the their counterparts in ReactJS?

I have a form in the frontend (built with ReactJS) where multiple fields are type=number fields and the numbers need to fit inside a specific range of values, i.e. greater than 0, smaller than 250.

In the backend, I achieved this control over the numeric input by using Min/Max ValueValidator. What shall I do in ReactJS frontend?

Thank you!

If you use redux-form, it has a validation for your form field redux-form.com/7.4.2/examples/syncvalidation. If you do not use redux-form, you have to have an onChange handler to check wether the value is in the range or not. If it is not valid, you can set state form is invalid and disable submit event — dnp1204
– dnp1204, Commented Aug 9, 2018 at 15:08
I think you should try redux-form if you use redux in your app — dnp1204
– dnp1204, Commented Aug 9, 2018 at 15:09

Tholle · Accepted Answer · 2018-08-09 15:08:27Z

28

You can still use the min and max attributes for the input, but have some custom logic for checking that the input value doesn't go outside of that interval.

Example

class App extends React.Component {
  state = { value: 0 };

  handleChange = event => {
    let { value, min, max } = event.target;
    value = Math.max(Number(min), Math.min(Number(max), Number(value)));

    this.setState({ value });
  };

  render() {
    return (
      <input
        value={this.state.value}
        onChange={this.handleChange}
        type="number"
        min="1"
        max="250"
      />
    );
  }
}

ReactDOM.render(<App />, document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id="root"></div>

answered Aug 9, 2018 at 15:08

Tholle

113k22 gold badges209 silver badges198 bronze badges

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

3 Comments

Francisco Souza Over a year ago

How about if I need a field with decimal places? Such currency fields? I am struggling with this for hours and I can't find a solution.

innovatism Over a year ago

Value doesn't have to beint in anyway

BrentL Over a year ago

With this solution you are not able to delete 1 so you can not enter anything that does not start with 1.

Indraneel Chatterjee · Accepted Answer · 2024-10-18 05:22:51Z

0

This is because the onChange function expects it to be numeric. When you are entering backspace that field becomes blank which is not a valid number and it's trying to call onChange with blank value that is why you are not able to edit it

answered Oct 18, 2024 at 5:22

Indraneel Chatterjee

1

Collectives™ on Stack Overflow

How to validate numeric inputs in ReactJS

2 Answers 2

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related