Ant Design: Validating form fields w/custom validators

Question

I'd like to use notifications to push form feedback, instead of the inline messaging. e.g.

<Form.Item label="Name">
  {getFieldDecorator("name", {
    rules: [
      {
        validator(rule, value, callback) {
          if (!value) {
            callback("Enter Your Name");

            // I'd like to use this instead:
            // notification.open({
            //   message: "Enter Your Name",
            //   description:
            //     'This is the content of the notification.',
            // })
          }

          callback();
        }
      }
    ]
  })(<Name />)}
</Form.Item>;

Is is possible to validate form fields and maintain the visual feedback (i.e. things like the border-color change), without the inline messaging?

score 1 · Answer 1 · answered May 17 '19 at 05:32

1

You can throw custom error message using this.props.form.setFields

this.props.form.setFields({
  user: {
    value: values.user,
    errors: [new Error('forbid ha')],
  },
});

Reference for form.setFields

answered May 17 '19 at 05:32

sathish kumar

1,477
1
11
18

score 1 · Accepted Answer · answered May 17 '19 at 05:39

1

You can do as you showed in your code and use css to hide error messages.

display: none

answered May 17 '19 at 05:39

Zohaib Ijaz

21,926
7
38
60

So obvious. I'm ashamed it wasn't something I considered beforehand. – Wilhelm May 17 '19 at 05:50
`display: none` solves my immediate problem but breaks the layout. `visibility: hidden` is a better solution but I'm not fond of either. Will mark yours as the selected answer, until a better one is offered. – Wilhelm May 17 '19 at 06:13

Ant Design: Validating form fields w/custom validators

2 Answers2