Home / Questions / 93416
Accepted
gmarsi
Asked: 2020-08-08 11:07:02 +0800 CST 2020-08-08 11:07:02 +0800 CST

How to allow only positive values ​​in an <input>?

  • 772

I need to check the content of a <input>in which only integers greater than 0 (from 1 to X) can be entered. How can I indicate it in the attribute pattern? Or should it be checked with a script?

javascript

8 Answers

  1. Best Answer

    There are 2 things that can matter to you. And depending on that will be the solution.

    • If you care about HTML validating your fields before submitting a form

    With what everyone told you is enough and more than enough:

    <input id="numero" type="number" min="1" pattern="^[0-9]+">
    • If you care that the user can hardly see a character that is not allowed in the field

    Then you have no choice but to use a script.
    There are some simpler ones, but the next one that I put can already be classified as far-fetched.

    class CampoNumerico {

  constructor(selector) {
    this.nodo = document.querySelector(selector);
    this.valor = '';
    
    this.empezarAEscucharEventos();
  }
  
  empezarAEscucharEventos() {
    this.nodo.addEventListener('keydown', function(evento) {
      const teclaPresionada = evento.key;
      const teclaPresionadaEsUnNumero =
        Number.isInteger(parseInt(teclaPresionada));

      const sePresionoUnaTeclaNoAdmitida = 
        teclaPresionada != 'ArrowDown' &&
        teclaPresionada != 'ArrowUp' &&
        teclaPresionada != 'ArrowLeft' &&
        teclaPresionada != 'ArrowRight' &&
        teclaPresionada != 'Backspace' &&
        teclaPresionada != 'Delete' &&
        teclaPresionada != 'Enter' &&
        !teclaPresionadaEsUnNumero;
      const comienzaPorCero = 
        this.nodo.value.length === 0 &&
        teclaPresionada == 0;

      if (sePresionoUnaTeclaNoAdmitida || comienzaPorCero) {
        evento.preventDefault(); 
      } else if (teclaPresionadaEsUnNumero) {
        this.valor += String(teclaPresionada);
      }

    }.bind(this));

    this.nodo.addEventListener('input', function(evento) {
      const cumpleFormatoEsperado = new RegExp(/^[0-9]+/).test(this.nodo.value);

      if (!cumpleFormatoEsperado) {
        this.nodo.value = this.valor;
      } else {
        this.valor = this.nodo.value;
      }
    }.bind(this));
  }

}

new CampoNumerico('#numero');
    <input id="numero" type="number" min="1" pattern="^[0-9]+">

    To add another field, you can instantiate another NumberField object by passing it some valid selector.

    new CampoNumerico('#otro-campo-a-validar');

    Note : I added a line of code so that it can be deleted with the delete key as well.

    In any case, as @Francisco Romero said, validations should not be left to the client side alone. They are easy to jump.
    In this case, just by preventing the execution of the script, and inspecting the field to remove the pattern, the user will be able to send whatever he wants to the server.

    I add a simpler solution, and more pleasant for those who use javascript in a classic way. However, there are some differences from the previous solution.

    Differences with the previous one - It does not allow pasting acceptable values ​​in the field. - Does not allow valid numbers to be dragged into it. - Accept that the field can be completely deleted. (In both solutions, this behavior can be changed if required.)

    const campoNumerico = document.getElementById('campo-numerico');

campoNumerico.addEventListener('keydown', function(evento) {
  const teclaPresionada = evento.key;
  const teclaPresionadaEsUnNumero =
    Number.isInteger(parseInt(teclaPresionada));

  const sePresionoUnaTeclaNoAdmitida = 
    teclaPresionada != 'ArrowDown' &&
    teclaPresionada != 'ArrowUp' &&
    teclaPresionada != 'ArrowLeft' &&
    teclaPresionada != 'ArrowRight' &&
    teclaPresionada != 'Backspace' &&
    teclaPresionada != 'Delete' &&
    teclaPresionada != 'Enter' &&
    !teclaPresionadaEsUnNumero;
  const comienzaPorCero = 
    campoNumerico.value.length === 0 &&
    teclaPresionada == 0;

  if (sePresionoUnaTeclaNoAdmitida || comienzaPorCero) {
    evento.preventDefault(); 
  }

});
    <input id="campo-numerico" type="number" min="1" pattern="^[0-9]+" onpaste="return false;" onDrop="return false;" autocomplete=off>

    Lastly, if you want to use this last solution for multiple fields, I'd recommend using it with event delegation.

    const contenedor = document.getElementById('contenedor-campos');

contenedor.addEventListener('keydown', function(evento) {
  const elemento = evento.target;
  if (elemento.className === 'campo-numerico') {
    const teclaPresionada = evento.key;
    const teclaPresionadaEsUnNumero =
      Number.isInteger(parseInt(teclaPresionada));

    const sePresionoUnaTeclaNoAdmitida = 
      teclaPresionada != 'ArrowDown' &&
      teclaPresionada != 'ArrowUp' &&
      teclaPresionada != 'ArrowLeft' &&
      teclaPresionada != 'ArrowRight' &&
      teclaPresionada != 'Backspace' &&
      teclaPresionada != 'Delete' &&
      teclaPresionada != 'Enter' &&
      !teclaPresionadaEsUnNumero;
    const comienzaPorCero = 
      elemento.value.length === 0 &&
      teclaPresionada == 0;

    if (sePresionoUnaTeclaNoAdmitida || comienzaPorCero) {
      evento.preventDefault(); 
    }
  }
});
    <div id = "contenedor-campos">
  <input class="campo-numerico" type="number" min="1" pattern="^[0-9]+" onpaste="return false;" onDrop="return false;" autocomplete=off>
  <input class="campo-numerico" type="number" min="1" pattern="^[0-9]+" onpaste="return false;" onDrop="return false;" autocomplete=off>
  <input class="campo-numerico" type="number" min="1" pattern="^[0-9]+" onpaste="return false;" onDrop="return false;" autocomplete=off>
</div>

    • 10

  2. To use the pattern attribute , it would be pattern="[0-9]+"

    • 9

  3. You can assign the pattern directly in the HTML, which will only write numbers.

    There is also the numeric input that only accepts numbers.

    And being numbers you can assign a minimum value to these inputs.

        <input type="number" pattern="^[0-9]" title='Only Number' min="1" step="1">
    
    <input type="number" min="0">

    • 8

  4. In case you wanted to use a patternyou could use pattern="^[0-9]+"so that when you send the form an error appears as if you are entering a wrong value if you enter a negative number.

    Also, if you want to prevent the user from being able to enter negative values ​​in any way you could use min="1"so that from its own inputit can only select values ​​greater than one.

    However, the previous step will not prevent a user from the keyboard to enter -15 for example, so you will need a script to control that no one can enter negative numbers in your input. For this I have used the function onkeypressand I have indicated that if they enter a negative number the number that is entered in inputit is 1.

    IMPORTANT: Doing a validation on the client side using Javascriptis not enough since this type of validation can be manipulated. You should also control it from the server side for more security on your platform.

    Example:

    var numero = document.getElementById('numero');

function comprueba(valor){
  if(valor.value < 0){
    valor.value = 1;
  }
}
    <input id="numero" type="number" onkeypress="comprueba(this)" min="1" pattern="^[0-9]+">

    • 8

  5. With html5 you can mark it directly in the input.

    Example: integers from 0 to 1000, scale of one in a unit:

    <input type="number" min="0" max="1000" step="1" name="num">

    More information here .

    • 7

  6. You can do it with ^[1-9]\d*$.

    Forces you to enter only positive numbers greater than zero. Validation is done without the need for scripts.

    Example:

    <form>
    <input type="text" pattern="^[1-9]\d*$"/>
    <input type="submit" />
</form>

    • 4

  7. You could use two different ways:

    • Input Type Number

      <input type="number" name="points" min="1" max="9" step="1">

      Attribute min : Specifies the minimum value of an input field
      Attribute max : Specifies the maximum value of an input field
      Attribute step : Specifies the legal number ranges for an input field.

    • The pattern attribute

      <input type="text" pattern="[0-9]{1}" title="Formato: 1 digito" />
      <input type="text" pattern="[0-9]{3}" title="Formato: 3 dígitos" /> , that is, 001, etc.

    InputType example Number:

    <form>
  <input type="number" name="points" min="1" max="9" step="1" />
  <input type="submit" />
</form>

    Attribute example pattern:

    <form>
  <input type="text" pattern="[0-9]{1}" title="Formato: 1 digito" />
  <input type="text" pattern="[0-9]{3}" title="Formato: 3 dígitos" />
  <input type="submit" />
</form>

    • 3

  8. I added a min of "0" and created a function in Js to validate:

    <input type="number" min="0" onkeyup="validarNumero(this)" />

    And this is my function:

    function validarNumero(value) {
   var valor = $(value).val();
    if (!isNaN(valor) && valor >= 0){
      $(value).val(valor);
    }else{
      $(value).val(0);
    }
}
    • 2