patternMismatch for input url in html

Question

I have a input url and pattern set to "^http://" as simplest pattern. When I use the value as below it says as patternMismatch in validity object. What is wrong with the pattern or value

<input value="http://www.example.com" pattern="^http://" type="url"/>, 

Answer 1

You need to escape your backslashes. Also, start and end anchoring is implicit:

<input value="http://www.example.com" pattern="http:\/\/.+" type="url"/>

The .+ ending means that there must be at least one character. Basically, this RegExp is actually:

/^http:\/\/.+$/u

The u flag and ^ and $ anchors are implicit:

• https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input
• Should I use ^ and $ in html5 input regex pattern validation?