title: How to preventDefault in forms?
body: <p>I  have a form with some inputs, and I want to make an js validation for that form. But, <code>preventDefault</code> is not working for me.</p>
  <p>HTML Code</p>
  <pre><code>&lt;form action=&quot;&quot; id=&quot;form&quot;&gt;
      &lt;h2&gt;Send us a message&lt;/h2&gt;
      &lt;div class=&quot;input-box&quot; id=&quot;nameInputBox&quot;&gt;
          &lt;small class=&quot;errorMsg-hidden&quot;&gt;error msg&lt;/small&gt;
          &lt;input type=&quot;text&quot; name=&quot;&quot; required id=&quot;name&quot;&gt;
          &lt;span&gt;Name&lt;/span&gt;
      &lt;/div&gt;
      &lt;div class=&quot;input-box&quot;&gt;
           &lt;input type=&quot;submit&quot; name=&quot;&quot; value=&quot;Nosūtīt&quot; id=&quot;submit&quot;&gt;
       &lt;/div&gt;
  &lt;/form&gt;
  </code></pre>
  <p>JS Code</p>
  <pre><code>const form = document.getElementById('form');
  const name = document.getElementById('name');
  
  form.addEventListener('submit', (e) =&gt; {
      e.preventDefault();
  });
  
  </code></pre>
  <p>In this case, it is important to keep the required attribute in html, because some of styling depends of <code>:valid</code> pseudo class.</p>
  <p>Is there any solution here?</p>