I have to use a legacy library to emulate html5 placeholder instead of actually using the placeholder attribute. We're using a js library that emulates this by populating the input's value, then clears the value when user clicks on the input. For example we have a captcha that has a temporary value of 'Enter Code'. We would still like to use HTML5 tooltip validations for browsers that can support it. So if the form is submitted without the captcha filled in than the tooltip should read 'Please enter code'. I set the 'required' attribute on the captcha text input field, however, this doesn't work because the js library set the value of the input field so that it's not blank. And the form is submitting anyway.
I would like to specify a pattern on the captcha input field so that the string 'Enter Code' is not valid, and neither is empty string.
I have tried:
<input id="captcha" type="text" required="required" pattern="(?!Enter Code)">
But that doesn't seem to work.
Use regex pattern ^(?!Enter Code$).+
<input id="captcha" type="text" required="required" pattern="^(?!Enter Code$).+">