title: Validating multiple inputs field with Yup
body: <p>I'm currently using Formik and validating with Yup. </p>
  
  <p>I am looking to validate 2 dates, a start date, and an end date.</p>
  
  <p>This was quite simple at first, I had two input fields, <code>start_date</code> and <code>end_date</code>. Both of these were just text inputs which accepted the following format, <code>MM-YYYY</code>. The validation is good enough, it first turns that string into a date, using <code>moment(value, "MM-YYYY")</code>.</p>
  
  <p>From this, we then had the following tests:</p>
  
  <pre><code>start_date: Yup.string()
  .test(
      'test1',
      'Format must be MM-YYYY',
      function (value){
          return moment(value, "MM-YYYY", true).isValid()
      }
  )
  .test(
      'test2',
      'Start date must be before end date',
      function(value){
          let { end_date } = this.parent;
          return moment(value, "MM-YYYY").isBefore(moment(end_date, "MM-YYYY"))
      }
  )
  </code></pre>
  
  <p><code>test1</code> simply checks that the <code>MM-YYYY</code> is a valid date. <code>test2</code> checks that the <code>start_date</code> is before the <code>end_date</code>. For the sake of simplicity, the <code>end_date</code> tests are the same, except there is any extra test. The extra test checks that the <code>end_date</code> is equal to or less than the current date.</p>
  
  <p>That is what I currently have, however what I want is 4 input boxes:</p>
  
  <ul>
  <li><code>start_date_month</code> (01, 02, 03...)</li>
  <li><code>start_date_year</code> (2000, 2001...)</li>
  <li><code>end_date_month</code></li>
  <li><code>end_date_year</code></li>
  </ul>
  
  <p>This is easy to do, but the tests will work a bit different, I'm not sure if we can test <code>start_date_month</code> and <code>start_date_year</code> together. In essence I need to concatinate them with <code>-</code> to create <code>MM-YYYY</code> again.</p>
  
  <p>Any ideas how to do this with Yup?</p>