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: 
make a if else check in your validatePhone function if value is not empty then run your code and if value is empty simply send a callback in else condition. like that

```js
const validatePhone = (rule: any, value: any, callback: any) => {
  if (value) {
    const countryName = form.getFieldValue('country');
    const country = CountryList.getCode(countryName);
    const phoneNumber = parsePhoneNumberFromString(value, country as CountryCode);
    console.log(form.getFieldValue('country'));
    if (countryName && phoneNumber && phoneNumber.isValid()) {
      updatePhonePrefix(prefix.concat(phoneNumber.countryCallingCode as string));
      callback();
    } else {
      callback(`Phone number is not valid for ${countryName}`);
    }
  } else {
    callback();
  }
};

```
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);
  }
}

```