Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

HTML

Wayne Priestley
Wayne Priestley
19,579 Points
Posted by Wayne Priestley
Wayne Priestley
19,579 Points

Specific number entry in form field.

Hi all,

Looking for some help with getting a form field only to except a specific number without using any javascript or php.

I have this code so far, but I'm unsure on how to build on it to get the result i want.

<div class="input">
        <label for="number" class="title">What is three plus four?</label>
          <input type="number" name="number" id="number" required="required">
         </div>

I hope its going to be a simple fix.

Also is it possible to add a hidden field to this, one that holds the valid input number i.e. "7" just to make it a little harder for bots?

Thanks in advance

4 Answers

James Barnett
James Barnett
39,199 Points
James Barnett
James Barnett
39,199 Points

Now that we've got HTML5 form validation you can use the magic of the pattern attribute to do this.

<input name="number" id="number" required="required" pattern="7" title="Please answer the question to prove you are human">

I made you a small demo on codepen so you can see it in action

Stone Preston
Stone Preston
42,016 Points
Stone Preston
Stone Preston
42,016 Points

i might be wrong but im pretty sure thats impossible in plain html. The html only marks up the page. It cant do any value checking on its own.

You can definitely add a hidden field. But your form isn't going to be very useful without any server side code.

Kevin Korte
Kevin Korte
28,148 Points
Kevin Korte
Kevin Korte
28,148 Points

You've done all that you can do with html to expect a number in an input field. However, with that code I can still type in letters. Probably the most complete way to do it would be to use Javascript to validate for a number only. You could have the validation be done on a key press, or when the form field loses focus.

You still need to validate in your server side language, say PHP as well though that it is in fact only a number. You are stuck for sure validating in a server side language, and could consider using Javascript to help with the user experience. However do not rely only on Javascript validation. Javascript could be turned off by the user, or the validation code could be edited by the user in their browser, to allow their enter to validate when you didn't want it to.

As far as having a hidden input, that's easy.

<input type="hidden" >

That will do it. Add your extra bits as needed.

Wayne Priestley
Wayne Priestley
19,579 Points
Wayne Priestley
Wayne Priestley
19,579 Points

Thanks for all your answers, i was thinking that it could not be done without js.

I didn't know about the pattern attribute James, thanx

Kevin, i was aware of the hidden input but wondered if there was a way to include t within a visible input, which i know isn't possible now.

Thanks again guys, looks like I've gotta get my js on.