How to add general validation error message in form?

Question

I have a form (antd) divided to a few sections, and in each section there are a lot of Form.Items, and each Form.Item has rules like required, specific type, etc.

in case there are any errors in the validation of any Field.Item - I want there to be a single specific, hard-coded string error message at the title of the relevant section, instead of the error-message that the Form.Item rule validation adds under each Form.Item.

is there support for a custom specific validation-error message I can use?

I thought about using some custom rules and just use a useState as a flag for the custom-error-message, but I want to know if there is a build-in option too

this is a really general question about the usage of 'Form' from antd, but I'm adding a general code for reference -

<Form>
   <Form.Item
    name={["firstSection","name"]}
    rules={[{ required: isRequired, message: "" }]}
    >
      <Input>
    </Form.Item>

   <Form.Item
    name={["firstSection","phoneNumber"]}
    rules={[{ required: isRequired, message: "" }]}
    >
      <Input>
    </Form.Item>

   <Form.Item
    name={["firstSection","fax"]}
    rules={[{ required: isRequired, message: "" }]}
    >
      <Input>
    </Form.Item>


   <Form.Item
    name={["secondSection","city"]}
    rules={[{ required: isRequired, message: "" }]}
    >
      <Input>
    </Form.Item>

   <Form.Item
    name={["firstSection","address" ]}
    rules={[{ required: isRequired, message: "" }]}
    >
      <Input>
    </Form.Item>

   <Form.Item
    name={["firstSection","country"]}
    rules={[{ required: isRequired, message: "" }]}
    >
      <Input>
    </Form.Item>
</Form

did you check this answer? https://stackoverflow.com/questions/41296668/how-do-i-add-validation-to-the-form-in-my-react-component — ieatbytes, Feb 28 '23 at 15:18
thanks but I saw it before I posted - that's only relevant in case I want to do the validation onSubmit, and I want to be responsive with the user - when they type the value and not only when they try to submit it — Tzachi Elrom, Feb 28 '23 at 15:59
Can you provide your form's code or what you've done up to now? — DevThiman, Feb 28 '23 at 22:11
@DevThiman this is a really general question but I added code for reference — Tzachi Elrom, Mar 01 '23 at 08:24
@TzachiElrom plz check my answer [here](https://stackoverflow.com/questions/71968205/validate-antd-form-input-in-onchange-with-the-value-return-by-back-end-api-call). It may bit difference with you scenario. Just let me know if it is matched or not. — DevThiman, Mar 01 '23 at 12:58
@DevThiman thanks but `form.validateFields` is a function that will trigger the validator of the fields you give it, and what I want to do isn't that but to add a general message for each section in case that section has errors — Tzachi Elrom, Mar 01 '23 at 13:31
@TzachiElrom ok. So do you want to display the custom-message while user typing or after submit? — DevThiman, Mar 01 '23 at 14:01
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/252228/discussion-between-tzachi-elrom-and-devthiman). — Tzachi Elrom, Mar 01 '23 at 14:09

score 0 · Accepted Answer · answered Mar 02 '23 at 09:28

following the open issue that @DevThiman showed me (https://github.com/ant-design/ant-design/issues/15674)

I ended up using this for a solution -

    const checkSectionErrors = async (fieldNames) => {
    const form = Form.useFormInstance();
    await form.validateFields();
    const errors = form.getFieldsError(fieldNames);
    const existingErrors = errors.find(({ errors }) => errors.length);
    return !!existingErrors;
  };

  const isFirstSectionInvalid = checkSectionErrors([
    ["secondSection", "city"],
    ["secondSection", "address"],
    ["secondSection", "country"]
  ]);
  const isSecondSectionInvalid = checkSectionErrors([
    ["firstSection", "phoneNumber"],
    ["firstSection", "name"],
    ["firstSection", "fax"]
  ]);

How to add general validation error message in form?

1 Answers1