title: Validating a react-final-form form with yup and custom validations
body: <p>I have a form created with react-final-form and a validation function that looks like this </p>
  
  <pre><code>export const validate = async (values, schema) =&gt; {
    if (typeof schema === 'function')
      schema = schema();
  
    try {
      await schema.validate(values, { abortEarly: false });
    } catch (e) {
      return e.inner.reduce((errors, error) =&gt; {
        return setIn(errors, error.path, error.message);
      }, {});
    }
  };
  </code></pre>
  
  <p>So when i render my form it looks something like this</p>
  
  <pre><code>&lt;Form
    onSubmit={handleSubmit}
    validate={values =&gt; validate(values,schema())}
  /&gt;
  </code></pre>
  
  <p>Schema is a Yup schema that is defined as such</p>
  
  <pre><code>const schema = () =&gt;
  
      yup.object().shape({
          name: yup
              .string()
              .max(255)
              .required(REQUIRED_FIELD),
          number: yup
              .string()
              .required(REQUIRED_FIELD),
          exp_year: yup
              .number()
              .required(REQUIRED_FIELD),
          exp_month: yup
              .number()
              .min(1,'Invalid')
              .max(12,'Invalid')
              .required(REQUIRED_FIELD),
          cvc: yup
              .number()
              .required(REQUIRED_FIELD),
  
      });
  </code></pre>
  
  <p>This works fine, as long as i use Yup methods, however, the credit card service i am using provides their own validation functions, such as 'Provider.validateCardNumber' from an external script. </p>
  
  <p>What i cant seem to figure out is where and how to add custom validation so that i can continue to use the Yup validation for other fields, but my external library methods for custom validation of the cvc and credit card number. </p>
  
  <p>Is there a way to add a custom callback function within my yup schema and return the value of the function such as my <code>Provider.validateCardNumber</code> within yup so i dont need to change my validate function? and if so, how can i access the <code>values</code> within the schema, which were passed to the validate function...</p>
  
  <p>OR</p>
  
  <p>how should i modify my validate function so that it will run the Yup schema validation, AND the external script validations, so in the end it returns an empty object to the validate prop of react-final-form</p>
  
  <p>In other words, I want to run an external method as part of my validation, but continue using Yup schema if possible. </p>