title: Validate raw data from the field in react-final-form
body: <p>I have a field in react-final-form where the user enters a date. For the internal value this gets normalized to <code>YYYY-MM-DD</code> but the user may enter it as <code>DD.MM.YYYY</code>.</p>
  <p>For valid data this is all fine, I can use <code>parse</code> to normalize and <code>format</code> to convert back.
  However, if a user enters garbage, there's not much I can do in <code>parse</code>... I ended up doing this awful hack which works, but I wonder if there's a cleaner way that allows me to separate the parsed data that will be fed into the form values, and the data that will be used to display the component and validate the user input.</p>
  <pre class="lang-js prettyprint-override"><code>const formatDate = (value) =&gt; {
    // console.log(`format: ${value}`);
    if (!value) {
      return '';
    }
    // something invalid =&gt; keep as-is
    if (value.startsWith('INVALID:')) {
      return value.substr(8);
    }
    // we have a valid value =&gt; format using our preferred display format
    const m = value.match(/^(\d{4})-(\d{2})-(\d{2})$/);
    return `${m[3]}.${m[2]}.${m[1]}`;
  };
  
  const parseDate = (value) =&gt; {
    if (!value) {
      return undefined;
    }
    // console.log(`parse: ${value}`);
    const m = value.match(/^(\d{2})\.(\d{2})\.(\d{4})$/);
    if (m) {
      return `${m[3]}-${m[2]}-${m[1]}`;
    }
    return 'INVALID:' + value;
  };
  
  const validateDate = (value) =&gt; {
    // console.log(`validate: ${value}`);
    if (value &amp;&amp; value.startsWith('INVALID:')) {
      return 'Invalid date';
    }
  };
  </code></pre>
  <pre class="lang-js prettyprint-override"><code>&lt;Field
    name=&quot;date&quot;
    component=&quot;input&quot;
    type=&quot;text&quot;
    format={formatDate}
    parse={parseDate}
    validate={validateDate}
    placeholder=&quot;dd.mm.yyyy&quot;
  /&gt;
  </code></pre>
  <p>Here's an executable codesandbox: <a href="https://codesandbox.io/s/react-final-form-format-on-blur-example-forked-5oowz?file=/src/index.js" rel="nofollow noreferrer">https://codesandbox.io/s/react-final-form-format-on-blur-example-forked-5oowz?file=/src/index.js</a></p>
  <p>Note: I'm NOT looking for date pickers or similar widgets that would rely on the field not being directly editable.</p>
  <p>Another kind of field where the current behavior feels a bit lacking is for number inputs:</p>
  <ul>
  <li>If i parse them to an actual number, I can no longer distinguish null/empty because the field is empty (valid) or because the field contains garbage (invalid)</li>
  <li>I can kind of work around this if he field is required (empty is invalid as well), but otherwise I'd once again need a hack like above...</li>
  </ul>