How to show Error or Validation messages only after form is submitted and not when user is typing in antd?

Question

I have created a form using Ant Design with Reactjs. It works great except it shows error messages that I have specified for each field under the input field before the "Submit" button is even clicked and user is typing in. It looks very odd and I would like to change that behavior. I want to show these messages only after the submit button is clicked. Is there a way to do it?

I went through the official doc. I couldn't find anything regarding "async validator" or "getFieldDecorator" that suggested what I wanted to achieve.

The "getFieldDecorator" to specify validation rules and error messages for each field is set in this way:

<Form.Item label="Title" style={{ margin: 0 }}>
  {getFieldDecorator('Title', {
    rules: [{ required: true, message: 'Please input the title', whitespace: true }], initialValue: title
  })(<Input onChange={this.onTitleChange.bind(this)} value={title} />)}
</Form.Item>

My "OnSubmit()" method looks like this:

handleSubmit = () => {
  this.props.form.validateFields((err, values) => {
    if (err) {
      return;
    }
    this.handleSaveBanner();
  });
};

Expected is to show error messages only after the submit button is clicked and not before that even if user types invalid inputs or leaves it blank. Help would be appreciated since I am new to React.

Answer 1

Please look through this. https://ant.design/components/form/#getFieldDecorator(id,-options)-parameters. There is a option named validateTrigger. It can control when to do validation. Wish it may hlp you.