Allow only number in Semantic UI React Form Input

Question

I have created a currency input React component to allow the user to enter numeric values. I made the input type to "number". This only works in Chrome (user can still enter non-numeric values in Firefox).

CurrencyInput Component:

import React from "react";
import { Form } from "semantic-ui-react";

interface ICurrencyInputProps {
  onChange(value: any): void;
  checkRange?: boolean;
  min: number;
  max: number;
  validationMessage: string;
  cssClasses?: string;
}

export class CurrencyInput extends React.Component<ICurrencyInputProps> {
  state = {
    showInvalidError: false,
    value: null
  };
  render() {
    return (
      <>
        <Form.Input
          icon="pound"
          iconPosition="left"
          placeholder="Whole pounds"
          className={this.props.cssClasses}
          type="text"
          error={this.state.showInvalidError}
          onChange={(event: any) => {
            let value = null;
            if (event.target.value) value = parseInt(event.target.value);

            this.setState({ value: value });
            this.props.onChange(value);
          }}         
        />      
      </>
    );
  }
}

export default CurrencyInput;

Usage:

<CurrencyInput
    cssClasses="has_tooltip"
    checkRange={true}
    onChange={(data: any) => {
              this.setState({
               premium: data
                        });
                      }}
    min={TargetPremiumRange.MIN}
    max={TargetPremiumRange.MAX}
    validationMessage="Validation message"/>

I want to prevent the user from entering any non-numeric value. How can I achieve this?

Even if the user can enter the text, when the button is clicked, there would be a warning, which will prevent the user from entering non-numeric values.[in firefox browser] — Anupam, Dec 29 '20 at 02:12

score 5 · Answer 1 · answered Sep 17 '21 at 07:22

5

<Input
onKeyPress={(event) => {
        if (!/[0-9]/.test(event.key)) {
          event.preventDefault();
        }
      }}
/>

answered Sep 17 '21 at 07:22

simo

23,342
38
121
218

Please explain your code and also state why your solution should be preferred over the other answers. – BDL Sep 17 '21 at 08:36
I've tried other solutions on StackOverflow by far this is the only answer that works for me. Thank you. – PA55ION May 12 '22 at 20:32

Ed Lucas · Answer 2 · 2021-01-25T14:16:58.083

4

You can change the error state in your onChange in <Form.Input>. Something like:

onChange={(event: any) => {
    let value = null;
    if (event.target.value) {
        value = parseInt(event.target.value, 10);

        // Test for valid number
        if (isNaN(value)) {
            setState({showInvalidError: true});
        } else {
            this.setState({ value: value });
            this.props.onChange(value);
        }
    }       
}

edited Jan 25 '21 at 14:16

answered Feb 04 '20 at 20:51

Ed Lucas

5,955
4
30
42

Thanks. But the user still will be able to enter non numeric values? – Joshua Feb 04 '20 at 20:53
1

Yes, but if the value is incorrect, it will not change the value saved in the state, your error state will be displayed, and the user will be allowed to correct it. You could check on each `keydown()` and prevent anything from a number being typed, but that doesn't solve for the case where someone just pastes in a value. `onchange()` should cover that. – Ed Lucas Feb 04 '20 at 20:55

Allow only number in Semantic UI React Form Input

2 Answers2