Question 43189 in Html Question posted in
Some basic documentation can be found here.

How to set multiple min and max attributes to input type number? – Html

I have an input field of type="number" and I want the user to only be able to input either number 3, or number 5 or number 10. Any other number is not allowed. How can I do this, using only HTML?

In my other input fields the user is only allowed to enter a number in the range of 4 – 10. Here is an example of one of those fields:

<input type="number" min="4" max="10" name="p_1_1" value="<?php $pointsData10->fetchPoint10_1_1($_SESSION["userid"]); ?>" oninput="changeColor(this.value)">

When the user enters an invalid number, you see this message appear (in Dutch, it means: "Value must be greater than or equal to 4" ):
message

I really like to see a message like this when the user enters a number that is not 3,5 or 10.

I think this message only appears when you use the type="number", min="" and max="" attribute. So I want to get this done with these attributes and not with JavaScript, because I don’t think this message will appear with JavaScript…
Or is there a way to do that?

I tried this and it didn’t work.

<input (type="number" min="3" max="3" || min="5" max="5" || min="10" max="10") name="p_18_1" value="<?php $pointsData10->fetchPoint10_18_1($_SESSION["userid"]); ?>" oninput="changeColor(this.value)" onkeypress="return isNumberKey(event)">
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I found something I'm quite satisfied with.

    <td class="score">
   <input type="text" pattern="(3|5|10)" name="p_18_1" value="<?php $pointsData1->fetchPoint1_18_1($_SESSION["userid"]); ?>" oninput="changeColor(this.value)">
</td>

    I looks a little strange, because it only works with type="text". But that doesn't matter, because the user can still enter only the numbers 3, 5 or 10.

    Nevertheless, I see a similar looking message appear when you enter something that is not allowed (translation: "Make sure the format meets the requested format."):message


  2. 0

    What if we just didn’t use min or max altogether?

    Let’s think outside the box and use a regex instead!
    For example, for your input that only accepts 3, 5 or 10, try using the required pattern attribute. So:

    <input placeholder="Input field" required pattern="^[3,5,10]$">

    However, your error message will become a little more generic (something like "input incorrect" or around those lines). If you want a more specific error message, you’d have to do it in javascript.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search