title: html-form: email not validating against pattern
body: <p>I'm desperate. Trying to validate an email-form-field with pattern and it don't work.</p>
  <p>This is the field:</p>
  <pre><code>&lt;form id=&quot;benutzerform&quot; name=&quot;benutzerform&quot; action=&quot;&quot; method=&quot;POST&quot; class=&quot;row g-3 mb-3 pb-3 needs-validation&quot; novalidate=&quot;true&quot;&gt;
  ....
  &lt;div class=&quot;input-group has-validation&quot;&gt;
      &lt;span class=&quot;input-group-text&quot;&gt;&lt;i class=&quot;bi bi-at&quot;&gt;&lt;/i&gt;&lt;/span&gt;
      &lt;input type=&quot;email&quot; class=&quot;form-control&quot; id=&quot;email&quot; pattern=&quot;/[^@]+@[^@]+\.[a-zA-Z]{2,}/i&quot; required&gt;
      &lt;div class=&quot;invalid-feedback&quot;&gt; Eine korrekte Emailadresse ist unbedingt erforderlich!  &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <p>It always shows the invalid-feedback.</p>
  <p>When in console I do this, it works.</p>
  <pre><code>mailpattern=/^([\w\.\-]+)@([\w\-]+)((\.(\w){2,4})+)$/i;
  mailpattern.test('me@home.de');
  true
  </code></pre>
  <p>but validating it with this function fails:</p>
  <pre><code>function validateFormFields()
  {
      let f = document.getElementsByClassName('needs-validation')[0];
      if (f.checkValidity() === false) 
      {
          f.classList.add('was-validated');
          return false;
      }
      return true;
  }
  </code></pre>
  <p>Where am I going wrong?</p>
  <p><strong>S O L U T I O N</strong></p>
  <p>Both ways (@Developer and @Ryszard Czech) lead to validating the form.
  But the easiest and fastest way is to remove the slashes. Then <code>checkValidity()</code> works like it should!</p>