Compruebe si el campo de entrada está vacío usando jQuery

Esta guía muestra cómo comprobar si un campo de texto tiene un valor con jQuery. Los ejemplos usan val() para leer el campo; no envían el formulario ni sustituyen la validación en el servidor.

Leer el valor de una entrada con el método val() de jQuery

jQuery no ofrece un método independiente para esta comprobación. Llama a val() sin argumentos para obtener el valor de texto actual de la entrada seleccionada; un campo que no se ha tocado devuelve "". Si se le pasa un argumento, val() establece un valor, una operación distinta de la lectura que se usa aquí.

En una cadena de JavaScript, la veracidad permite distinguir "" de las cadenas que contienen caracteres.

Ejecuta este ejemplo:

El código y las etiquetas o salidas visibles de esta sección se mantienen en inglés.

const name = "Ada";
if (name) {
  console.log(`Hello, ${name}!`);
}

Hello, Ada!

En el ejemplo de jQuery que aparece a continuación, !$('#NameField').val() es verdadero cuando el valor del campo de texto es una cadena vacía. El operador ! convierte un valor falso en verdadero; para este campo, el valor falso relevante es la cadena vacía que devuelve val(). El código de la página del navegador carga jQuery desde su CDN. Es un ejemplo estático, no una salida de ejecución.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Check a text input with jQuery</title>
  <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
  <script>
    $(function () {
      $('#SubmitBtn').on('click', function () {
        if (!$('#NameField').val()) {
          alert('Please enter your name.');
        }
      });
    });
  </script>
</head>
<body>
  <label for="NameField">Please enter your name:</label>
  <input type="text" id="NameField" name="NameField">
  <button id="SubmitBtn" type="button">Submit</button>
</body>
</html>

La alerta aparece al hacer clic en el botón cuando el campo está vacío. No aparece si el valor contiene caracteres. Este ejemplo solo comprueba el texto actual del campo; no define qué debe hacer la aplicación cuando la comprobación se supera.

Comprobar si el valor de una entrada está vacío con val().length

Si quieres que la condición exprese la regla de forma explícita, lee la propiedad length de la cadena y compárala con cero: $('#NameField').val().length === 0. En un campo de texto, esta condición es verdadera cuando el valor no contiene caracteres y falsa cuando contiene uno o más. El operador de igualdad estricta (===) compara length con el número 0 sin convertir el tipo.

Usa esa expresión en lugar de la condición del controlador de clic anterior para mantener el mismo formulario y comportamiento de la alerta. Como val() devuelve una cadena para este campo de texto, es adecuado leer su propiedad length. La comprobación de length deja clara la condición prevista, mientras que la forma que niega el valor es más breve; ambas expresan la misma regla para este campo.

Elegir la comprobación que se ajuste a las reglas de entrada

Una cadena formada solo por espacios sigue sin estar vacía: los espacios son caracteres, así que ambas comprobaciones consideran que un valor como " " tiene un valor positivo de length. Si tu regla debe rechazar una entrada que solo contenga espacios en blanco, recorta el valor antes de comprobarlo, por ejemplo con $('#NameField').val().trim().length === 0. Recortar cambia la regla porque ignora los espacios en blanco iniciales y finales; hazlo solo si eso es lo que requiere la interfaz. Tampoco elimina los espacios en blanco que haya dentro de un nombre o una frase.

Para un campo de texto sencillo, elige la comprobación de veracidad para escribir código conciso, o la comparación con length si a ti o a tu equipo les resulta más clara la regla explícita de cero caracteres. Asegúrate de que el selector apunte a la entrada correcta y decide por separado cómo comunicar que la comprobación ha fallado. Estas comprobaciones en el cliente ayudan a ofrecer una respuesta inmediata, pero los datos también requieren una validación adecuada dondequiera que la aplicación los procese.