Collectives™ on Stack Overflow

Find centralized, trusted content and collaborate around the technologies you use most.

Teams

Q&A for work

Connect and share knowledge within a single location that is structured and easy to search.

I have an antd InputNumber in Form.Item in a react project. My validation for this input is checking the length of input value.

This is my code:

render() {
    return (
      <Form.Item
        label="Value"
        name="numberValue"
        rules={[
            pattern: /^(?:\d*)$/,
            message: "Value should contain just number",
            maxLength: 50,
            message: "Value should be less than 50 character",
        validateTrigger="onBlur"
        <InputNumber
          onChange={(value) => {
            this.props.setValue(value);
      </Form.Item>
I have two problems:
I want to show the Value should contain just number messages when user enter non numeric character. But this message doesn't show at all.
I want to show the Value should be less than 50 character message, when user enter the number/value with more than 10 character. But now, with entering the first character, this message will be shown!
Depends on which validation library are you using.
InputNumber max is Number.MAX_SAFE_INTEGER, so maybe use a simple <Input> with a pattern matcher:
  render() {
    return (
      <Form.Item
        label="Value"
        name="numberValue"
        rules={[
            pattern: /^(?:\d*)$/,
            message: "Value should contain just number",
            pattern: /^[\d]{0,50}$/,
            message: "Value should be less than 50 character",
        validateTrigger="onBlur"
        <Input
          onChange={(value) => {
            this.props.setValue(value);
      </Form.Item>
                I want to check the length of input value.  max check the value. I tested max before, it will check the value. for example when I enter 51 as a value, the related message will be shown
– Zahra Talebi
                Aug 25, 2020 at 12:41
                Oh, I get it. InputNumber has a limit, it cannot reach 50 chars anyways. I've added a solution that works with simple <Input>
– Robert Kovacs
                Aug 25, 2020 at 13:01
                ant.design/components/input-number/#API states that max is Number.MAX_SAFE_INTEGER, maybe you can change that.
– Robert Kovacs
                Aug 25, 2020 at 13:03
You use maxlength in <Input /> and type='number' must in rules
<Input maxLength={50}
    onChange={e => getValue(e.target.value)}
    rules={[{ type: 'number' }]} />
The native input tag it self won't support input tag which has type='number' to use maxLength. MaxLength works with text.
Link to the Github Ant Design issue.
Ant Design has nothing to do with this.
Instead you can use as bellow code to limit the number.
<Input 
  onChange={(e) =>
    e.target.value.length <= 10 &&
    handleChange(e.target.value)
  type='number'
        
Thanks for contributing an answer to Stack Overflow!
Please be sure to answer the question. Provide details and share your research!
But avoid …
Asking for help, clarification, or responding to other answers.
Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.