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 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
– Funk Forty Niner, Commented Jun 18, 2015 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
– Funk Forty Niner, Commented Jun 18, 2015 at 16:39
Do Google "validate url with html5" many many hits. Use the "pattern" attribute. — Funk Forty Niner
– Funk Forty Niner, Commented Jun 18, 2015 at 16:50

tagawa · Accepted Answer · 2015-07-15 04:59:21Z

1

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.

answered Jul 15, 2015 at 4:59

tagawa

4,6412 gold badges30 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

HTML5 Form Input Type: Checking the input

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related