score:1

Accepted answer

I figured this out - it wasn't showing the errors because the Form.Item in the TextInput was checking for the field to be touched first:

<Form.Item
      label={label}
      hasFeedback={!!errors[name]}
      validateStatus={touched[name] && errors[name] && 'error'}
      help={touched[name] && errors[name]}
>

...changing this to the following allows this to work (I just remove the check for whether the field was actually touched):

<Form.Item
      label={label}
      hasFeedback={!!errors[name]}
      validateStatus={errors[name] && 'error'}
      help={errors[name]}
>

score:0

Yes, you can validate for button click instead form submit. Some points you should consider.

  1. You should wrap the form elements with tag.

  2. Don't forget to use the export method wrap with create form method.

    export default Form.create()(SimpleForm);

  3. add a onlick method and use validate method like below.

    this.props.form.validateFieldsAndScroll((err, values) => { if (!err) { //Do something what you want. } });

  4. Use proper validation method for fields

Good luck!

score:0

On validate all button click, you could use form.submitForm();

You can check here with working stackblitz demo.

Code snippet

function doSave(values) {
  console.log("saving data", values);
}

function validateAllClick(form) {
  form.submitForm();
  console.log("just validating");
}


function App() {
  return (
    <Layout>
      <h1>Here's My Form</h1>
      <Content>
        <CreateItemForm
          status={editModelStatus}
          setFormRef={setFormRef}
          onSubmit={values => doSave(values)}
          onValidate={validateAllClick}
        />
      </Content>
    </Layout>
  );
}

Related Query

More Query from same tag