title: Using Yup to validate credit card details
body: <p>I'm using <a href="https://github.com/jquense/yup" rel="noreferrer">Yup</a> to validate a signup form but I'm struggling to validate the credit card fields due to needing methods from both Yup's <code>string</code> and <code>number</code> schema.</p>
  
  <p>Card number for example should not exceed 16 characters. This is easily achievable using the <code>max</code> method from the <code>string</code> schema. However, if the user typed in 16 letters rather than numbers this would currently pass validation. If I change the schema from <code>string</code> to <code>number</code> then <code>max</code> doesn't behave in the same way and instead adds up all the numbers in the field and checks to see if it equates to less than the max number.</p>
  
  <p>An example of a field where I would need to use the <code>min</code> and <code>max</code> methods of the <code>number</code> schema is the expiry month where the min would be 1 and the max would be 12. However, I still need to check to make sure that the number of characters is in this field is 2 as a leading 0 should be used for the months January to September.</p>
  
  <pre><code>const validationSchema = {
    cardNumber: Yup.string()
      .label('Card number')
      .max(16)
      .required(),
    cvc: Yup.string()
      .label('CVC')
      .min(3)
      .max(4)
      .required(),
    nameOnCard: Yup.string()
      .label('Name on card')
      .required(),
    expiryMonth: Yup.string()
      .label('Expiry month')
      .min(2)
      .max(2)
      .required(),
    expiryYear: Yup.string()
      .label('Expiry year')
      .min(4)
      .max(4)
      .required(),
  };
  </code></pre>