title: Perform HTML Input Validation on React Button Click
body: <p>This is a simplified scenario.</p>
  
  <p>I have a form with a required input field and a button. The button has an <code>onClick</code> React handler and is of type "button". I want the browser to check the HTML fields and do some initial validation (like it would do if no React were involved and the button were of type "submit"). I imagine I should do something in the handler function, but I am not sure what.</p>
  
  <p>A few things I tried:</p>
  
  <ul>
  <li>Changing the button to type "submit" does perform the check, but also calls the handler, which does not know whether the check succeeded or failed</li>
  <li>Adding the handler on the form instead works, but makes the real example harder to maintain because I have a lot of buttons</li>
  </ul>
  
  <p>Thank you</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div id="app"&gt;&lt;/div&gt;
  </code></pre>
  
  <pre class="lang-js prettyprint-override"><code>class MyClass extends React.PureComponent {
      render() {
          return (
              &lt;form action="#"&gt;
                  &lt;input type="text" required/&gt;
                  &lt;button type="button" onClick={e =&gt; this.handle(e)}&gt;Press&lt;/button&gt;
              &lt;/form&gt;
          )
      }
  
      handle(event) {
          // What should I do here?
      }
  }
  
  
  ReactDOM.render(&lt;MyClass /&gt;, document.querySelector("#app"))
  </code></pre>
  
  <p><a href="https://jsfiddle.net/89wr3ot4/" rel="nofollow noreferrer">https://jsfiddle.net/89wr3ot4/</a></p>