HTML5 Form Input Type: Checking the input

Question

I would like to check if the URL the user entered into the input box contains 'xyz' before sumbitting. I am aware this can be done with php after fetching the put, however can this be done in HTML5?

For example, here I put in a random word, and HTML5 tells me this is not a URL. Like this

Can i get it to check if the entered text contains something before submit?

My code

  <input type="url" name="tradeurl" placeholder="Steam Trade URL">
  <input type="submit" value="Update">

check out `stripos()`. Here, check out this Q&A http://stackoverflow.com/q/7118823/ - they're using `strpos()` but that will fail if someone enters uppercase or mixed letters. `stripos()` is case-insensitive. — Funk Forty Niner, Jun 18 '15 at 16:36
I'd opt for a server-side method myself. ^ JS can always be disabled. Plus, OP tagged as php. — Funk Forty Niner, Jun 18 '15 at 16:39
Do Google "validate url with html5" many many hits. Use the "pattern" attribute. — Funk Forty Niner, Jun 18 '15 at 16:50

score 1 · Answer 1 · answered Jul 15 '15 at 04:59

Yes you can, using the HTML5 pattern attribute as @fred-ii suggests like so:

<input type="url" name="tradeurl" placeholder="Steam Trade URL" pattern="[^ ]*(xyz)[^ ]*">

Even if you do this you need to validate server-side as well — it's easy to disable client-side (HTML/JavaScript) validation.

HTML5 Form Input Type: Checking the input

1 Answers1