Probably done with JavaScript.

See this Example from W3Schools

<input type="number"  size="2" min="1" max="2">

Even with the Min and Max values set, you can still type in whatever number you want and it will accept that value. How do I restrict the user in this case so they can only enter 1 or 2, if they enter something different then it sends an alert and clears the field so the user can try again.

Probably done with JavaScript.

See this Example from W3Schools

<input type="number"  size="2" min="1" max="2">

Even with the Min and Max values set, you can still type in whatever number you want and it will accept that value. How do I restrict the user in this case so they can only enter 1 or 2, if they enter something different then it sends an alert and clears the field so the user can try again.

• javascript
• html
• forms

Share Improve this question Follow asked Mar 28, 2014 at 17:26 DivineChefDivineChef 1,22111 gold badge1010 silver badges2929 bronze badges 7

• When do increase or decrease value by click on arrow(right side) then the action will perform according to you. If you put the number mannualy(by typing) then it does not work. – Suman Bogati Commented Mar 28, 2014 at 17:29
• What does your current javascript code look like, and what specific problems do you have with it? – admdrew Commented Mar 28, 2014 at 17:30
• You'll probably want to add a keypress event to the input and detect the keycode or value - then take action accordingly. – Goose Commented Mar 28, 2014 at 17:30
• On each keypress in the input field you can check if you can validate the input text and do necessary – rozar Commented Mar 28, 2014 at 17:32
• @user3362232 but you did not say about restriction on cliking right side arrow. – Suman Bogati Commented Mar 28, 2014 at 17:35

 |  Show 2 more ments

6 Answers 6

Sorted by: Reset to default 4

Without using JS, you can set the pattern attribute of the input field so the user knows at least that what he/she put in is invalid. This will not clear the field however.

DEMO

HTML

<input type="number" size="2" min="1" max="2" pattern="[12]">

CSS

input:invalid { color:red; border:2px solid red; }

For simplicity's sake, I'm adding an id to your input:

<input type="number" id="myInput" size="2" min="1" max="2">

Then we can simply add an event listener:

document.querySelector('#myInput').addEventListener('input', function(e) {
  if (e.target.value !== '1' && e.target.value !== '2') {
    alert('Invalid number!');
    e.target.value = '';
    e.preventDefault();
  }
});

JSFiddle example

Keep in mind, it's rather jarring UX to use alert, I'm only using it here for an example. Instead, you may want to add an error class to the element or pop up a modal.

If you don't mind having a standard error message on invalid input, you can also use:

<input type="text" pattern="[1-2]">

Edit: If you add a "title" attribute to the input, you can set the error message you want.

You can use jQuery and checkValidity() method of the input:

$('[name=points]').bind('keyup',function(){
  if (!$(this).get(0).checkValidity()) {
    $(this).val('');
  }
});

checkValidity() will only work in modern browsers.

Demo: http://www.bootply./125666

The example is using the HTML 5 input type number, which not all browsers support consistently.

You could limit this range using JavaScript, perhaps using jQuery. This is definitely an improvement over the code above, but in truth in a real-world application you acplish this by using a framework ponent like AngularJS, Knockout, or jQuery Validator. Using a framework like this will allow you to manage all of your validation in a central location and implement more plex logic involving multiple properties, such as "Value two must be greater than value one".

This is how <input type=number> is expected to work: it does not physically prevent the user from entering arbitrary data (well, it might, but it need not), but the control does not satisfy constraints upon form submission, if it does not match the requirements.

If you want to let the user select between two alternatives only, use a checkbox, or two radio buttons, or a select element with two options. The details depend on whether this should be an obligatory choice or optional and whether there is a default value.

P.S. W3schools. is bogus, in this issue, too. The example you link to (which is different from your code) is not strictly incorrect, just illogical and misleading.