javascript - Customize text for invalid fields in HTML -

i trying display customized message when text entered not match pattern. following code have used.

<input pattern="[a-za-z0-9]" name="firstname" id="firstname" required="" type="text" /> 

when enter valid text 'akshay'; showing me invalid message 'please match requested format'

also, want change message customized one. tried using code given above not working. below code have used below:

<script> document.getelementbyid("firstname").addeventlistener("invalid", function (e) { var elem = e.target;  if (elem.value != "") {     e.target.setcustomvalidity('cannot contain special characters'); } }); </script> 

please me code.

try use oninvalid method in input tag

<input pattern="[a-za-z0-9]*" name="firstname" id="firstname" required="required" type="text" oninvalid="oninvalid="this.setcustomvalidity(this.willvalidate?'':'cannot contain special characters')" />