Controlar campos vacios y la longitud con jQuery

En este artículo vamos a ver como controlar o validar los campos o inputs de un formulario con jQuery.

Normalmente solo necesitamos validar que el campo haya sido rellenado, pero para comprobar la veracidad de los datos a veces es necesario tener en cuenta el número de caracteres. Por ejemplo en los campos de teléfono, para validar que un número tiene 9 caracteres y que los caracteres introducidos son numéricos.

Primero vamos a comprobar que el campo no está vacío:

if($("#phone").val().length < 1) {
    alert("El nombre es obligatorio");
    return false;
}

Y luego observar si en el campo teléfono se han escrito exactamente 9 carácteres:

if($("#phone").val().length != 9) {
    alert("El teléfono debe tener 9 caracteres");
    return false;
}

El anterior código jQuery lo añadiremos dentro del clásico document(ready), en los puntos suspensivos:

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
   $('#send').click(function(){
     ...
   });
});

En este caso, tendremos un botón con id=»send» que tras pulsarlo pasaremos a ejecutar el código que haya dentro.

Y en nuestro <body> dentro del formulario tendremos un input con id=»phone»

<input type="text" id="phone" name="phone" />

Si no queda claro puedes ver el ejemplo en funcionamiento.

Autor
Escrito por Jose Aguilar - Director ejecutivo y tecnológico en JA Modules. Experto programador PrestaShop y Experto programador WordPress.
Te ha servido? Valora esta entrada!
(9 votos, promedio: 5 de 5)
Comparte en las redes sociales
¿Buscas trabajo de programador?

12 respuestas a “Controlar campos vacios y la longitud con jQuery”

  1. Esteban dice:

    //Con esta Validación no permite un campo solo llenado con espacios
    ….
    $(‘#save’).click(function(){
    if($(«#nombre»).val().trim()===») {
    alert(«El nombre es obligatorio»);
    return false;
    }
    …..

  2. lalo dice:

    Amigo nome funciona el codigo a que se debera crs que sea por la version de javascript ocupo la 1.8.2 en el src le puse la direccion cres ke sea por eso

    $(document).ready(function() {
    $(‘#guardar’).click(function(){
    if($(«#rfc»).val().length != 13) {
    alert(«El RFC debe tener 13 caracteres»);
    return false;
    }
    });
    });

    • Jose Aguilar dice:

      Posiblemente el evento click no esté funcionando. Actualmente hay otras alternativas. Por ejemplo:

      $(‘#guardar’).on.(‘click’, function()…

  3. lalo dice:

    AMIGO ESCRIBI EL CODIGO PERO NOME FUCNIONA A QUE CRES QUE SE DEBA SERA POR LA VERSION

  4. Danny M dice:

    Si usa el trim de jquery elimina espacios y lo evaluas. very easy 😛

  5. Eborio Linárez dice:

    Tu código tiene algunas fallas ya que si introduzco 9 espacios en blanco me valida el campo como crrecto

  6. Eborio Linárez dice:

    Tu código tiene fallas ya que si introduzco 9 espacios en blanco me dice que el campo es correcto

    • JVS dice:

      Estás equivocado.

      No es ningún error, el código es para revisar que no está vacío, y si introduces 9 espacios no está vacío tienes 9 espacios.

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

This site uses Akismet to reduce spam. Learn how your comment data is processed.