Regex test works but breaks when it's passed to HTML5 input pattern attribute
<p>I'm trying to use this pattern on a password field that says "Password should be min 6 chars and contain 1 non-alphabet character":</p>

<pre><code>^(?=.{6})(?=.*[^a-zA-Z])
</code></pre>

<p>However when passing this into the <code>pattern</code> attribute it stops working. Check this demo:</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>document.querySelector('form').addEventListener("submit", onFormSubmit);

function onFormSubmit(e) {
  e.preventDefault();
  var pwEl = document.querySelector('.password');
  
  alert('With pattern: ' + pwEl.checkValidity() + ', without pattern: ' + /^(?=.{6})(?=.*[^a-zA-Z])/.test(pwEl.value));
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;form novalidate&gt;
  
  &lt;input class="password" type="password" placeholder="Enter password" pattern="^(?=.{6})(?=.*[^a-zA-Z])" /&gt;
  
  &lt;button type="submit"&gt;submit&lt;/button&gt;
  
&lt;/form&gt;</code></pre>
</div>
</div>
</p>

<p>Try entering:</p>

<ul>
<li>"password" both are false</li>
<li>"password1" pattern is false but regex with the same pattern works</li>
</ul>