Reset html required style with javascript
<p>I have a form with an input with the attribute required set. When i submit the form and the input is empty, it shows a red border around it.</p>

<p>I am now looking for a javascript method to remove this, and reset the display of the input to the initial state.</p>

<p>After resetting and submitting again, the input should be checked again and show a red border if empty. Therefore i think setting css with :required does not give the desired solution.</p>

<p>A quick fiddle to illustrate my question:</p>

<p><div class="snippet" data-lang="js" data-hide="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>jQuery(function() {
  jQuery('#reset').click(function() {
    //Clear red border of input
  });
});</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
&lt;form id="myform"&gt;
  &lt;input id="myinput" required&gt;
  &lt;input type="submit" value="submit"&gt;
&lt;/form&gt;
&lt;button id="reset"&gt;reset&lt;/button&gt;</code></pre>
</div>
</div>
</p>

<p>After clicking reset, the form should be shown as when the page is just loaded.</p>

<p><strong>Edit</strong>
I tested this in firefox. In chrome the style automatically is removed when the element is onfocussed. However, i am still looking for a js solution to remove the message.</p>