How to force type a number larger than another

Asked

Viewed 50 times

-1

How to force the user to enter a number from another?

For example, the user when typing a number into a input the same may not be less than 4, he must be obliged to type in the number 4 onward..

<input type="number" value="deverá ser maior ou igual que 4" />

I’m a beginner in Javascript I can only do something if the code is working..

  • Please clarify your problem or provide additional details in order to highlight exactly what you need. The way it’s written these days it’s hard to tell exactly what you’re asking.

  • Oh community, there was nothing beyond the criteria there goes, just wanted to know about a doubt that I could not even begin to have no idea of the logic for it, but that someone there in the community surely has.

  • 2

    The question was closed because it has no defined criteria. It is not known whether you want the user to enter only with digits greater than four or values greater than four. For example 22 is larger than four but is not composed of digits larger than four.

1 answer

-2


You can set this directly in the attributes of input, with min=" " and if you want a maximum number you can use the max=" ".

It would look like this, for example:

<form action="#">
  <input type="number" name="teste" min="4" max="20">
  <button type="submit">Enviar</button>
</form>

If you really want to do it with Javascript, you can do a function that does the validation if the number is larger than specified. The function is called with onblur when you leave the input field. Setting the send button initially as disabled, and after validation if the number is higher, it enables the send button. Otherwise it does not enable the button and returns a message.

Following example:

<form action="#">
  <input type="number" id="input" onblur="checaNumero()">
  <button type="submit" id="botao-enviar" disabled > Enviar </button>
</form>
<script>
function checaNumero(){
            var botao = document.getElementById("botao-enviar");
            var input = document.getElementById("input");
            var numeroMinimo = 4;

            if (input.value > numeroMinimo) {
                //aqui habilitamos o botão
                botao.disabled=false; 

            } else{

                alert("Número precisa ser maior que " + numeroMinimo);
            }
        }

</script>
  • Hello Gabriel, wouldn’t be quite a minlength="4" what I’m not getting, is not declare the amount of typed characters, but rather type numbers larger than 4, type, force the user to type number above 4, type: 4,5,6,7,8, etc... Number below 4, type: 3,2,1 and 0 would not even need to issue an alert, just did not allow them to be typed.

  • I tried something like this here;var valor = document.getElementById("valor");&#xA;function validatePassword(){&#xA;ivalor.setCustomValidity("Valor precisa ser maior do que 4");&#xA;} else {&#xA;valor.setCustomValidity('');&#xA;}&#xA;}

  • You could create a validation that is called with keydown, and make this validation and if the number pressed is less than 4, the function erases the number that has just been written immediately. I could use that logic, and it would be almost in the same sense as what I did, but instead of releasing a message, I could erase the number. But it would be very confusing and inefficient and I tell you why, for example, if the user were to type 33, it would be prevented, because it has the initial number 3 ? You can use this logic and create something that meets your requirements. But I believe the best solution yet, would be "MIN".

  • Gabriel, couldn’t do keydown, it would prevent the user from typing any other, for example is the 30, sele for typing the 30 would not...? I don’t understand, javascript seems to me to be quite comprehensive, but I can’t find anything about not allowing you to type a value less than 4.

  • Yeah, like I said. That wouldn’t go over too well with this problem. But what would be more important at this time is to find a logic to circumvent this, because the resources revolve around these cited.

  • 1

    Obg Gabriel, I made a test here with that example that you posted and I believe that I will be able to make a change in it that I thought here.

Show 1 more comment

Browser other questions tagged

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