1

En un formulario html tengo una serie de input, algunos de ellos necesito validar si son numéricos; por ejemplo:

<input id="idoc" type="text" name="idoc">

Estoy usando jquery y la validación del campo lo hago cuando pierde el foco, es decir:

 $("#idoc").blur(function()
 {                
                var valor = this.value;
                for(i=0;i<valor.length;i++)
                {
                    var code=valor.charCodeAt(i);
                        console.log(code);

                        if(code<48 || code>57)
                        {          
                            alert("Debe contener sólo números");
                            this.value=""; 
                            this.focus();
                            return;
                        }    
                }
  });

Esto funciona bien.

Para no reescribir esto para cada elemento INPUT que deba validar, quiero definir una función que sea llamada por cada evento de perdida de foco de los elementos a validar, pasándole el objeto a la función, es decir:

    $("#idoc").blur(function()
    {                
        var elemento = $(this);
        validanumeros(elemento);                
    });

    function validanumeros(valida)
    {
        var valor=valida.val;
        console.log(valor);
        for(i=0;i<valor.length;i++)
        {
            var code=valor.charCodeAt(i);
                console.log(code);

                if(code<48 || code>57)
                {          
                    alert("Debe contener sólo números");
                    this.value=""; 
                    this.focus();
                    return;
                }    
        }
    }

Pero esto no funciona. Cómo se debe hacer la pasada del objeto a la función, de modo que dicha función pueda ser invocada cuando pierden el foco otros INPUT?

1 respuesta 1

4

Independientemente de la lógica que estás siguiendo para hacer la validación (quizá on.chage sea mejor que on.blur...), hay varias formas de escuchar los eventos de múltiples elementos.

Una de las más simples sería asignar una clase a los diferentes input y asignar un listener usando el selector de clases.

Aquí damos la clase only-number a los inputs que interesa controlar y asignamos un listener usando ese selector con $(".only-number").on("blur", function().

Por ejemplo, los elementos 1 y 3 son escuchados porque tiene la clase only-number, mientras que lo elementos 2 y 4 no son escuchados, porque no tienen esa clase.

$(".only-number").on("blur", function() {
  console.log(`El valor actual es ${this.value}. Hacer validación aquí`)
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="idoc1" type="text" name="idoc1" class="only-number">
<input id="idoc2" type="text" name="idoc2" placeholder="Este no" class="another-class">
<input id="idoc3" type="text" name="idoc3" class="only-number">
<input id="idoc4" type="text" name="idoc4" placeholder="Este tampoco" class="another-class">

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.