How can I validate the form programmatically before submit?

[kfcaio]

Prerequisites

• I have read the documentation;
• In the case of a bug report, I understand that providing a SSCCE example is tremendously useful to the maintainers.
• Ideally, I'm providing a sample JSFiddle or a shared playground link demonstrating the issue.

Description

Given the following form component:

        const Form = withTheme(AntDTheme);
        <Form
          id="inner-form"
          // @ts-ignore
          ref={(formData) => myForm = formData}
          schema={data}
          onChange={
            (e) => {
              console.log("Event:", e)
            }
          }
          validate={(formData, errors)=>{
            return errors
          }}
          uiSchema={uiSchema}
          showErrorList={false}
        >
          <Button hidden={false} onClick={()=>console.log("myform:", myForm)}>
            Action
          </Button>
        </Form>

I'm trying to get errors from myForm.validate(). But it returns:

{
    "errors": [],
    "errorSchema": {
        "__errors": [],
        "firstName": {
            "__errors": []
        },
        "date1": {
            "__errors": []
        },
        "telephone": {
            "__errors": []
        },
        "filesAccept": {
            "__errors": []
        }
    }
}

My schema:

  {
      "id": 1,
      "name": "lorem ipsum",
      "type": "object",
      "required": ["firstName", "filesAccept"],
      "properties": {
        "firstName": {
          "type": "string",
          "title": "First name",
          "pattern": "foobar"
        },
        "date1": {
          "type": "string",
          "format": "date"
        },
        "telephone": {
          "type": "string",
          "title": "Telephone",
          "minLength": 10
        },
        "filesAccept": {
          "type": "array",
          "title": "Arquivos",
          "items": {
            "type": "string"
          }
        }
      }
    }

In other words, I would like to validate form fields before clicking submit button. Is it possible?

Steps to Reproduce

1. Render form
2. Write something different to "foobar" in "First Name" field
3. Click "Action" button
4. Open Dev Tools, copy myForm to global variable and then execute myForm.validate()

Expected behavior

I would expect errors object in validate prop to indicate that "First Name" field of the form, for example, does not follow the pattern required.

Actual behavior

Function used in validate prop never shows errors

Version

You can usually get this information in your package.json or in the file URL if you're using the unpkg one.

"@rjsf/core": "^4.0.1"
"@rjsf/antd": "^4.0.1"

[a3957273]

We use jsonschema to validate our schemas. https://www.npmjs.com/package/jsonschema

  const validator = new Validator()
  const sectionErrors = validator.validate(state, schema)

[kfcaio]

Hi, @a3957273 thank you. I ended up using https://www.npmjs.com/package/ajv

const ajv = new Ajv({ allErrors: true });
addFormats(ajv as any);
const validate = ajv.compile(schema);

[kfcaio]

Hi, @a3957273 thank you. I ended up using https://www.npmjs.com/package/ajv

const ajv = new Ajv({ allErrors: true });
addFormats(ajv as any);
const validate = ajv.compile(schema);

Anyway, I would expect react-jsonschema-form to validate its own data. AFAIK, it already uses ajv

[heath-freenome]

Fixed in the v5 beta.9