Invalid form inputs - Red border with ONLY HTML, CSS, JAVASCRIPT : <p>I'd want to make a red border around invalid input elements after clicking the "Check" button. The problem is <strong>I can't use frameworks or plugins, just HTML, CSS and JavaScript</strong>.
I've tried to search for some hours on the web and all I found was to use <code>:valid</code> and <code>:invalid</code> pseudo-classes. They work fine, but <strong>I'd want to display the red border only AFTER clicking the "Check" button</strong>.</p>

<p>This is my code</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>input:invalid {
  border: 1px solid red;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;html&gt;
&lt;head&gt;
  &lt;title&gt;Invalid Form Test&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
  &lt;div&gt;
    &lt;form id="login" method="post"&gt;
      &lt;div&gt;
        &lt;label for="username"&gt;Username&lt;/label&gt;
        &lt;input type="text" id="username" placeholder="Username" name="username" required /&gt;
      &lt;/div&gt;
      &lt;div&gt;
        &lt;label for="password"&gt;Password&lt;/label&gt;
        &lt;input type="password" id="password" placeholder="Password" name="password" required /&gt;
      &lt;/div&gt;
      &lt;div&gt;
        &lt;button id="check-btn"&gt;Check&lt;/button&gt;
      &lt;/div&gt;
    &lt;/form&gt;
  &lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;</code></pre>
</div>
</div>
</p>

<p>If possible, I'd also want to remove the default browser tooltip and red outline (i.e. I'd want just my style for unvalid elements).</p>

<p>Thank you in advance for your help!</p>
