React how to display ErrorMessage in Input Form

Question

I'm using react and antd.
I'm using antd's Input component.
I want to display an Error message at the bottom of the Input form if more than 10 characters are entered.
I want to use antd's errorMessage.

code

import React from "react";
import { Input } from "antd";

const App = () => {
  const [value, setValue] = React.useState(null);
  const [onSave, setOnSave] = React.useState(null);
  const handleInputChange = React.useCallback((e) => {
    setValue(Number(e.target.value));
  }, []);

  const onSaveBlur = React.useCallback(() => {
    if (String(value).length < 10) {
      setOnSave(true);
    } else {
      setOnSave(false);
    }
  }, [value]);
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      <Input
        type="number"
        value={value}
        onChange={handleInputChange}
        onBlur={onSaveBlur}
      ></Input>
    </div>
  );
};

export default App;

Majid M. · Accepted Answer · 2021-10-07 07:56:34Z

1

Try out this:

  import "./styles.css";
import React from "react";
import { Input, Form } from "antd";

const App = () => {
  const [value, setValue] = React.useState(null);
  const [onSave, setOnSave] = React.useState(null);
  const handleInputChange = React.useCallback((e) => {
    setValue(e.target.value);
  }, []);

  const onSaveBlur = React.useCallback(() => {
    if (String(value).length < 10) {
      setOnSave(true);
    } else {
      setOnSave(false);
    }
  }, [value]);
  return (
    <div className="App">
      <Form>
        <Form.Item
          label="Number"
          name="number"
          rules={[
            { required: true, message: "Please input value!" },
            { max: 10, message: "length should be less then 10 letters!" }
          ]}
        >
          <Input
            type="number"
            value={value}
            onChange={handleInputChange}
            onBlur={onSaveBlur}
          ></Input>
        </Form.Item>
      </Form>
    </div>
  );
};

export default App;

edited Oct 7, 2021 at 7:56

answered Oct 6, 2021 at 7:37

Majid M.

4,9941 gold badge16 silver badges35 bronze badges

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

4 Comments

aahhuhuhu Over a year ago

I used antd's errorMessage.　ant.design/components/form

Majid M. Over a year ago

@aahhuhuhu Edited. Please check it again.

aahhuhuhu Over a year ago

What is the role of name="username"? When I remove name="username", the error message is no longer displayed.

Majid M. Over a year ago

@aahhuhuhu Nothing, It's just a name and label for the input.

Vishal Nai · Accepted Answer · 2021-10-06 09:40:31Z

1

You can add Default AntD rule inside Form.Item like below

<Form.Item
   rules = {[{  max:10, message: "length should be less then 10 
   letters!"}]}
>
   <Input placeholder="Username"/>
 </Form.Item>

edited Oct 6, 2021 at 9:40

answered Oct 6, 2021 at 7:48

Vishal Nai

2881 silver badge13 bronze badges

10 Comments

aahhuhuhu Over a year ago

codesandbox.io/s/adoring-tree-xe4xm?file=/src/App.js

aahhuhuhu Over a year ago

I copied the above code and used it, but I get an error.

Vishal Nai Over a year ago

@aahhuhuhu <InputNumber min={1} max={10} value={value} onChange={setValue} /> you can even use InputNumber component of antd it's super simple for your example Refer this: ant.design/components/input-number

aahhuhuhu Over a year ago

I've fixed it, but I'm still getting errors.　　codesandbox.io/s/adoring-tree-xe4xm?file=/src/App.js

Vishal Nai Over a year ago

Check this codesandbox i have edited codesandbox.io/s/adoring-tree-xe4xm?file=/src/App.js

|

Nacho · Accepted Answer · 2021-10-06 07:37:32Z

0

You should add an error state and display it following the condition:

import React from "react";
import { Input } from "antd";

const App = () => {
  const [value, setValue] = React.useState(null);
  const [onSave, setOnSave] = React.useState(null);
  const [error, setError] = React.useState(null)
  
  const handleInputChange = React.useCallback((e) => {
    setValue(Number(e.target.value));
  }, []);

  const onSaveBlur = React.useCallback(() => {
    if (String(value).length < 10) {
      setOnSave(true);
    } else {
      setError(isLowerCase ? null : 'error message')
      setOnSave(false);
    }
  }, [value]);
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      <Input
        type="number"
        value={value}
        onChange={handleInputChange}
        onBlur={onSaveBlur}
      ></Input>
      <div role="alert" style={{color: 'red'}}>
        {error}
      </div>
    </div>
  );
};

export default App;

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

answered Oct 6, 2021 at 7:37

Nacho

9741 gold badge7 silver badges9 bronze badges

1 Comment

aahhuhuhu Over a year ago

I would like to use errorMessage from the antd library.　　ant.design/components/form

Collectives™ on Stack Overflow

React how to display ErrorMessage in Input Form

3 Answers 3

4 Comments

10 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

10 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related