Limit typed number

Asked

Viewed 101 times

3

I have a field number where I need to type a value from 0 to 25, in case the user type a number above 25 he does not allow, I tried to use the max="25" but it only blocks if the person does not type, there is some way to do this in jquery?

<input type="number" min="1" max="25"  class="form-control" name="qtdbuffet7">

javascript html jquery

  • Take a look at the link, I think it might help you: https://stackoverflow.com/questions/8761852/maximum-and-minimum-values-in-a-textbox

  • One tip I’d give is not to use the type number, if you expect to have Safari users in your application

2 answers

6


You can do it directly at the event onchange field. In the example below the value will be changed to the limits if they are exceeded:

<input type="number"
       min="1"
       max="25"
       class="form-control"
       name="qtdbuffet7"
       onkeyup="this.value = this.value > 25 ? 25 : this.value < 0 ? 0 : this.value"
>

  • 1

    I got it, I didn’t know you could use the onchange for that, thanks for the help!

  • Sorack, I’m getting to type number 26 for example, or 266, or 354353. But as it is correct (by the author of the question) I must not have understood the question then...

  • @Leonardobonetti when you leave the field the value is corrected

  • I had edited your answer but I undid the edit... wouldn’t it be better to apply the onkeyup? Because his problem was with the keyboard

  • @Leonardobonetti then, has to give a test to see if we will not have anomalous behavior when typing is very fast

  • No, it is better because the validation is "on demand" and not only after the user leaves the input

Show 1 more comment

0

It also blocks when you type into a field using the attribute max, but the blocking action is only validated when you are calling the action of Submit in your form, if the value is above the limit value max, a similar warning will be displayed below:

<!DOCTYPE html>
<html>
<body>

<h2>Exemplo stackoverflow.com</h2>

<form action="/minha_pagina.php">
    <input type="number" name="number" min="0" max="25"><br><br>
    <br><br>
    <input type="submit"> 
</form>

</body>
</html>

inserir a descrição da imagem aqui

Now, if you want to do this validation at the time of completing the form, you can use the function onkeyup and adapt to how you want it to work, or follow the example of @Sorack using the function onchange.

  • 2

    Young man, I wasn’t the one who said no, but to let the user miss what he has typed, only to fix it later is a euristic anti patter, an error of this type can easily irritate the user, or even cause him to abandon the fill or finalize the purchase... I don’t think this is good practice. Besides, this "Alert" goes to each browser and this behavior can escape the dev’s control. and the designer.

  • 1

    I appreciate the feedback and agree with you @hugocsl, including when it comes to the possibility to allow the user to err on what he has typed, However, this is not the case that I used as criteria for this answer. The author of the question mentioned that this property does not block if user does not type, and my intention was only to explain that this is possible, bringing together an example model.

  • 2

    I understood his point of view, it was more of a hint than criticism... ;)

  • 1

    I accept all criticisms and tips, whether they are positive or not. I thank you once again for coming to give an opinion instead of just giving a downvote, as many do. It turns out that I explained how I quoted in the comment above my response was based on a statement by the author that I found incorrect.

Browser other questions tagged javascript html jquery

You are not signed in. Login or sign up in order to post.