title: yup.js Validate number field is larger than sibling, or nullable
body: <p>I'm using Yup.js to validate some form fields.</p>
  
  <p>I have two integer fields, <code>Year Built</code> &amp; <code>Year Renovated</code>. </p>
  
  <p><code>Year Built</code> is a required field, <code>Year Renovated</code> is not.</p>
  
  <p>Year renovated can be left blank, however <em>if there is a value</em> it should be larger than year built (for a renovation certainly must occur after the date it was built).</p>
  
  <p>I believe I need to use yup's <code>ref()</code> as well as yup's <code>when()</code> function. I've tried the following:</p>
  
  <p>let currentYear = new Date().getFullYear();</p>
  
  <pre><code>yup.object().shape({
    yearBuilt     : yup.number().integer().min(1700).max(currentYear+1).required(),
    yearRenovated : yup.number().integer().when(
                      '$yearRenovated', (yearRenovated, schema)=&gt;{
                          return yearRenovated &gt; 0 ? 
                              schema.min(yup.ref('yearBuilt')).max(currentYear+1) :
                              schema.transform(emptyStringToNull).nullable()
                      }
                  )
  })
  </code></pre>
  
  <p>* The transform function, <code>emptyStringToNull</code> simply checks if <code>value === ''</code> and returns null if so.</p>
  
  <p>The above does allow null values, as well as does correctly check for an integer. However it does not properly evaluate <code>yearRenovated &gt; yearBuilt</code>. How do I properly check that if <code>yearRenovated</code> is not null, that it is greater than <code>yearBuilt</code>?</p>
  
  <p>Thank you all so much for your help.</p>