Home / Questions / 70351
Accepted
omaza1990
Asked: 2020-05-17 06:04:04 +0800 CST 2020-05-17 06:04:04 +0800 CST

Input text field validation - It should only accept numbers - Javascript

  • 772

A field inputin a form:

<td align=right>Cod.Postal:</td><td align=left><input type="text" name="codigo" id="idcodigo" maxlength="5"></td>

You must be able to write only numbers (0-9).

    window.addEventListener("load", function() {
    miformulario.codigo.addEventListener("keypress", function(){ 
        return soloNumeros(event);
        }, false);
    });

    //Solo permite introducir números.
    function soloNumeros(e){
    var key = window.event ? e.which : e.keyCode;
    if (key < 48 || key > 57) {
        //Usando la definición del DOM level 2, "return" NO funciona.
        e.preventDefault();
    }
}

ValidarCP function:

//Validar el CP.
function validarCP(){
    //Eliminamos la clase error asignada al elemento CP.
    document.getElementById("idcodigo").className="";
    var valor = document.getElementById("idcodigo").value;
    var patron = /^\d{5}$/;
    if (patron.test(document.getElementById("idcodigo").value) && (!isNaN(valor))){
        document.getElementById("idcodigo").className="correcto";   
        return true;
    }else{
        //Situamos el foco en el campo idcodigo y le asignamos la clase error.
        alert("El código debe tener al menos 5 digitos.\n");
        document.getElementById("idcodigo").focus();
        document.getElementById("idcodigo").className="error";  
        return false;
    }
}

How would you assign this ValidarCP function to the "code" field? With the onblur event? I would like that when losing the focus, it checks if there are 5 digits, if there are, nothing happens, if there are not 5 digits, it shows a message (alert()) and puts the background of the field in red.

styles.css

.error{
    background-color: red;
}
javascript

4 Answers

  1. What happens is that you have to validate the input in JavaScript, even if you return a false, it does not know what to do, you have to add the e.preventDefault()so that now it does not allow writing characters that are not of type number

    miFormulario = document.querySelector('#miFormulario');
miFormulario.codigo.addEventListener('keypress', function (e){
	if (!soloNumeros(event)){
  	e.preventDefault();
  }
})

//Solo permite introducir numeros.
function soloNumeros(e){
    var key = e.charCode;
    console.log(key);
    return key >= 48 && key <= 57;
}
    <form name='miFormulario' id='miFormulario'>
<input type="text" name="codigo" id="idcodigo" maxlength="5">
</form>

    I took your code, removed some extra stuff, and added the validation ofpreventDefault()

    Cheers

    • 7
  2. Best Answer

    Using the DOM level 2 definition it returndoesn't work as you expect. You should use Event.preventDefault()instead.

    Finally, the condition must be the opposite of the one you had raised:

    window.addEventListener("load", function() {
  miformulario.codigo.addEventListener("keypress", soloNumeros, false);
});

//Solo permite introducir numeros.
function soloNumeros(e){
  var key = window.event ? e.which : e.keyCode;
  if (key < 48 || key > 57) {
    e.preventDefault();
  }
}
    <form name="miformulario">
  <td align=right>Cod.Postal:</td><td align=left><input type="text" name="codigo" id="idcodigo" maxlength="5"></td>
</form>

    • 6

  3. You can only do it with html, create your input of type number. Something like this:

    input type="number" name="code" id="idcode" min="0" max="9"

    • 2

  4. Here is something simpler. A greeting

    <!DOCTYPE html>
<html>

<body>
  <h1>SOLO NUMEROS SIMPLE</h1>
  <div>
    <input type="input" name="ESP" onKeypress="if (event.keyCode < 45 || event.keyCode > 57) event.returnValue = false;">
  </div>
</body>

</html>

    • 0