title: How to validate one input field + search-button with Formik in React?
body: <p>I am trying to validate input using Formik with one single input field that is connected to a search button. This is what I want to achieve:</p>
  <ul>
  <li>I want to accept only numbers</li>
  <li>If the user enters alphabetic characters, I want to show a div with a error message.</li>
  </ul>
  <p>My question is:</p>
  <p>What's the best approach when instead of a submit button I have a SEARCH button?</p>
  <p>All the solutions I find so far are with several input fields with a submit button, either like this one:</p>
  <p><a href="https://formik.org/docs/api/errormessage" rel="nofollow noreferrer">https://formik.org/docs/api/errormessage</a></p>
  <pre><code> Or like this one:
  </code></pre>
  <pre><code> // Synchronous validation
   const validate = (values, props /* only available when using withFormik */) =&gt; {
     const errors = {};
   
     if (!values.email) {
       errors.email = 'Required';
     } else if (!/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i.test(values.email)) {
       errors.email = 'Invalid email address';
     }
   
     //...
   
     return errors;
   };  
  </code></pre>
  <p>My code so far:</p>
  <pre><code>&lt;FlexItem flex={1.5}&gt;
                          &lt;FormikInput
                              id={`reportName`}
                              name={`reportName`}
                              label={'Invoice number'}
                              
                              placeholder={'Search for an existing invoice number'}
                              onChange={e =&gt; {
                                  setInput(e.target.value);
                              }}
                              value={input}
                              type={'number'} //?
                          /&gt;
                      &lt;/FlexItem&gt;
                      &lt;FlexItem className=&quot;flex-toolbar-button&quot;&gt;
                          &lt;StyledToolbarButton
                              size=&quot;normal&quot;
                              buttonStyling=&quot;primary&quot;
                              onClick={() =&gt; {
                                  setSegmentId(segmentInput);
                                  setInvoiceId(input);
                              }}
                              disabled={!segmentInput || !input}
                          &gt;
                              Search
                          &lt;/StyledToolbarButton&gt;
                      &lt;/FlexItem&gt;
  </code></pre>