title: Customize text for invalid fields in HTML
body: <p>I am trying to display a customized message when the text entered does not match the pattern.
  Following is the code I have used.</p>
  <pre><code>&lt;input pattern=&quot;[a-zA-Z0-9]&quot; name=&quot;firstName&quot; id=&quot;firstname&quot; required=&quot;&quot; type=&quot;text&quot; /&gt;
  </code></pre>
  <p>When I enter a valid text like 'akshay'; it is showing me the invalid message:</p>
  <blockquote>
  <p>'Please match the requested format'</p>
  </blockquote>
  <p>Also, I want to change this message to a customized one. I tried using the code given above but its is not working. Below is the code I have used below:</p>
  <pre><code>&lt;script&gt;
  document.getElementById(&quot;firstname&quot;).addEventListener(&quot;invalid&quot;, function (e) {
  var elem = e.target;
  
  if (elem.value != &quot;&quot;) {
      e.target.setCustomValidity('Cannot contain special characters');
  }
  });
  &lt;/script&gt;
  </code></pre>
  <p>Please help me with this code.</p>