title: How to hide html5 form validation on reseting form
body: <p>I have an HTML page with input fields and two buttons: <code>Submit</code> and <code>Reset</code>. When the user clicks on <code>Submit</code>, the required validation messages come up, that's fine, but they also come up when clicking <code>Reset</code>. </p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;html&gt;
  
  &lt;body&gt;
      &lt;form action="insertVoucherCategory" method="post"&gt;
          &lt;table&gt;
              &lt;tr&gt;
                  &lt;td&gt;Voucher Category&lt;/td&gt;
                  &lt;td&gt;&amp;nbsp;&lt;/td&gt;
                  &lt;td&gt;&lt;input  name="voucherCategory" id="voucherCategory" title="Please Enter Voucher Category" required="required" placeholder="Enter Voucher Category" tabindex="1" /&gt;&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td&gt;Description&lt;/td&gt;
                  &lt;td&gt;&amp;nbsp;&lt;/td&gt;
                  &lt;td&gt;&lt;input  name="description" id="description" title="Please Enter Description" required="required" placeholder="Enter Description" tabindex="2" /&gt;&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td&gt;&lt;input type="submit" id="btnAdd" value="Submit" tabindex="3"/&gt;&lt;/td&gt;
                  &lt;td&gt;&amp;nbsp;&lt;/td&gt;
                  &lt;td&gt;&lt;input type="reset" id="btnReset" value="Reset" tabindex="4"/&gt;&lt;/td&gt;
              &lt;/tr&gt;
          &lt;table&gt;
      &lt;/form&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>This is what happens on <code>Reset</code>:</strong>
  <img src="https://i.stack.imgur.com/XGvMy.png" alt="Actual response"></p>
  
  <p><strong>This is what I want:</strong>
  <img src="https://i.stack.imgur.com/zDbI0.png" alt="Ideal response"></p>