Custom validateStatus in Ant Design Form.Item

Question

I would like to add a custom validateStatus to my Form.Item only if result is set in the state. If not I would like it to be generated by the validation rule:

<Form.Item
  name="email"
  rules={[{ required: true, type: 'email', message: 'Enter you email' }]}
  required
  validateStatus={result && (result.result === "success" ? "success" : "warning")}
  help={result && (result.result === "success" ? "You've subscribed successfully!" : "Your email is already subscribed")}
>

But it doesn't seem to work. Here is a link to codesandbox. You can see that the help message is working, but validateStatus doesn't seem to work, as the help message always stays grey (it should be red, when validateStatus is set to an error, or green, when it's set to success). How can I fix that?

Can you create it on codesandbox? [here](https://codesandbox.io/s/vibrant-pasteur-dk7id) i made a sandbox and try to recreate it but seems working. I also used a dummy result variable. You can edit that and save it and include it on your question for better debugging. — Chanandrei, Oct 07 '20 at 06:37
@Chanandrei Hi, I've updated my question with the link to codesandbox and added some more explanation. — jupiteror, Oct 07 '20 at 15:56

score 2 · Accepted Answer · answered Oct 08 '20 at 06:23

I ended up adding undefined to validateStatus:

<Form.Item
  name="email"
  rules={[{ required: true, type: 'email', message: 'Enter you email' }]}
  required
  validateStatus={result ? (result.result === "success" ? "success" : "warning") : undefined}
  help={result && (result.result === "success" ? "You've subscribed successfully!" : "Your email is already subscribed")}
>

And some custom css .ant-form-item-has-success .ant-form-item-explain {color: #52c41a;} to display success message as green.

Awesome! short and nice. Thanks! – Chanandrei Oct 08 '20 at 06:27 — Chanandrei, Oct 08 '20 at 06:27

score 1 · Answer 2 · answered Oct 08 '20 at 03:39

Upon checking, there's no green border or text color if validateStatus prop value is success. I tried to place help message but no green color (I used antd documentation code). What can you do is to place hasFeedback prop, it will show green checked icon indication of success.

On the error side, it seems that when you include validateStatus prop, it forcedly removed some css selectors for the rules styles. This was also said on this issue. You can take a look on this class name ant-form-item-has-error for futher investigation.

Solution is don't include the props if the result is null.

const [result, setResult] = useState(null);

const onFinish = (values) => {
  const res = "error"; //<--- change this to see different result
  if (res === "success") {
    setResult({ result: "success" });
  } else {
    setResult({ result: "error" });
  }
};

<Form.Item
  label="Email"
  name="email"
  rules={[{ required: true, message: "Enter you email" }]}
  {...(result && {
    hasFeedback: true,
    help:
      result.result === "success"
        ? "You've subscribed successfully!"
        : "Your email is already subscribed",
    validateStatus: result.result === "success" ? "success" : "warning",
  })}
>
  <Input />
</Form.Item>

I suggest to pick only one idea when it comes showing form error. This can be done using rules props and form instance only and also can be done using validateStatus and help props alone.

Custom validateStatus in Ant Design Form.Item

2 Answers2