Cómo validar numéricos en un TextBox con JavaScript o JQuery

En este artículo te mostrare cómo validar que el usuario solo capture valores numéricos en un cuadro de texto usando JQuery y JavaScript. Ya que esta validación es muy común. Para muchos programadores validar campos de texto es muy sencillo, pero para los que no saben cómo hacerlo aquí está el ejemplo y la explicación.


Para validar los valores numéricos en el TextBox, escribimos el siguiente código según lo que queramos usar si JQuery o JavaScript.

Usando JavaScript.

Crearemos la función “validNumericos”, que será la que validara que se capturen solo numéricos en el cuadro e texto.

<head runat="server">
    <script type="text/javascript" >
        function validNumericos(evt) {
            var charCode = (evt.which) ? evt.which : event.keyCode
            if (((charCode == 8) || (charCode == 46) 
            || (charCode >= 35 && charCode <= 40)
                || (charCode >= 48 && charCode <= 57)
                || (charCode >= 96 && charCode <= 105))) {
                return true;
            }
            else {
                return false;
            }
        }
    </script>
</head>

Ahora necesitamos llamar a la función validNumericos  como se muestra a continuación, se manda llamar en el TextBox.

<asp:TextBox id="txtNumeric" onkeydown="return 
validNumericos(event)" runat="server"></asp:TextBox>

Usando JQuery

Para validar con JQuery, primero agregas la referencia del JQuery y enseguida escribe el código para validar los valores numéricos en el TextBox.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' 
type='text/javascript'></script>
        $(function () {
            $('#TextBox1').keydown(function (e) {
                if (e.shiftKey || e.ctrlKey || e.altKey) {
                    e.preventDefault();
                } else {
                    var key = e.keyCode;
                    //alert(key)
                    if (!((key == 8) || (key == 46) ||
 (key >= 35 && key <= 40)
 || (key >= 48 && key <= 57)
 || (key >= 96 && key <= 105))) {
                        e.preventDefault();
                    }
                }
            });
        });

    </script>
 <asp:TextBox id="TextBox1" runat="server"></asp:TextBox>

Si necesitas ayuda o no puedes implementar este ejemplo, puedes escribirme y pronto te dare respuesta.

!!!Gracias por leerme y seguirme.

 

Artículos relacionados
How to get the latitude and longitude of Draggable pin for Google Maps
How to get the latitude and longitude of Draggable pin for Google Maps

The Google Maps API offers a wide range of fun

How to export data from HTML tables to Excel, CSV, PNG and PDF with jQuery
How to export data from HTML tables to Excel, CSV, PNG and PDF with jQuery

Exporting data to Excel, pdf, among other form

¿Cómo calcular la distancia entre dos puntos en Google Maps con JavaScript?
¿Cómo calcular la distancia entre dos puntos en Google Maps con JavaScript?

Para medir la distancia entre dos puntos se ut

1 Comentarios
  • melvin cava Comentar
    jueves, 12 de marzo de 2015

    Estimado. muy bueno el material publicado me ayudo de mucho

    • Estrada WebGroupComentar
      martes, 17 de marzo de 2015

      Me da gusto Melvin, a que te dedicas? Si requieres ayuda o tienes alguna duda estoy a tus ordenes. Saludos

    • melvin cavaComentar
      martes, 17 de marzo de 2015

      Muchas Gracias. Mira soy Ing. de Sistemas, actualmente trabajo como Analista funcional y en mis ratos libres voy aprendiendo algunas cosas en Internet. -- Saludos Cordiales.

Enviame un comentario