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
– Anupam, Commented Dec 29, 2020 at 2:12

simo · Accepted Answer · 2021-09-17 07:22:01Z

5

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

answered Sep 17, 2021 at 7:22

simo

24.7k41 gold badges127 silver badges227 bronze badges

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

2 Comments

BDL Over a year ago

Please explain your code and also state why your solution should be preferred over the other answers.

PA55ION Over a year ago

I've tried other solutions on StackOverflow by far this is the only answer that works for me. Thank you.

Ed Lucas · Accepted Answer · 2021-01-25 14:16:58Z

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, 2021 at 14:16

answered Feb 4, 2020 at 20:51

Ed Lucas

7,4544 gold badges40 silver badges52 bronze badges

2 Comments

Joshua Over a year ago

Thanks. But the user still will be able to enter non numeric values?

Ed Lucas Over a year ago

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.

Collectives™ on Stack Overflow

Allow only number in Semantic UI React Form Input

2 Answers 2

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related