Question: I'm working on a form (`Ant Design` `<Form>`) where I want a custom validation of phone number (as it depends on `country` field and has some extra logic), and other fields validated by `antd` built-in features, so when user submits the form I want all fields to be validated with `validateFields()` passed as an array of field names showing validation errors as usual (red message underneath and an error message in console), but all I'm getting is just a warning message in the console.

Here's a minimal reproduction 

[![Edit confident-goodall-4f0bx](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/confident-goodall-4f0bx?fontsize=14&hidenavigation=1&theme=dark)

Am I missing something about how `validator` function works?

Answer: 
what the [antd docs](https://3x.ant.design/components/form/#Customize-validator-do-not-working) recommend is to use async or try-catch block

option 1:

```
const validatePhone = async (rule, value) => {
  // check failing condition
  throw new Error('Something wrong!');
}

```

option 2:

```
const validatePhone = (rule, value, callback) => {
  try {
    throw new Error('Something wrong!');
  } catch (err) {
    callback(err);
  }
}

```
Here how I handled the error in antd form

```
import React, { useState } from 'react';
import { Form, Input } from 'antd';

function MyCustomForm(props: any) {
  const [form] = Form.useForm();
  const [validateFieldsName, setValidateFieldsName] = useState<string[]>([]);

  const handleValidateFieldNames = (name: string) => {
    const isFieldName = validateFieldsName.find(
      (fieldName) => fieldName === name
    );
    if (isFieldName) return 'onChange';
    return 'onBlur';
  };

  return (
    <Form form={form} layout="vertical">
      <Form.Item
        name="contactNumber"
        label="Contact Number"
        validateTrigger={handleValidateFieldNames('contactNumber')}
        rules={[
          {
            required: true,
            message: 'Please enter contact number!',
          },
          {
            validator(_, value) {
              if (!value || value.length === 10) {
                return Promise.resolve();
              }
              return Promise.reject('Please enter 10 digit Number!');
            },
          },
        ]}
      >
        <Input
          type="number"
          placeholder="Contact number"
          onBlur={() =>
            setValidateFieldsName([...validateFieldsName, 'contactNumber'])
          }
        />
      </Form.Item>
    </Form>
  );
}

export default MyCustomForm;

```