Verifica si las entradas están vacías usando jQuery

Tengo un formulario en el que me gustaría que se rellenaran todos los campos. Si se hace clic en un campo y luego no se completa, me gustaría mostrar un fondo rojo.

Aquí está mi código:

$('#apply-form input').blur(function () { if ($('input:text').is(":empty")) { $(this).parents('p').addClass('warning'); } }); 

Aplica la clase de advertencia independientemente del campo que se rellene o no.

¿Qué estoy haciendo mal?

 $('#apply-form input').blur(function() { if( !$(this).val() ) { $(this).parents('p').addClass('warning'); } }); 

Y no necesitas necesariamente .length o ver si es >0 ya que una cadena vacía se evalúa como falsa de todos modos, pero si quieres hacerlo con fines de legibilidad:

 $('#apply-form input').blur(function() { if( $(this).val().length === 0 ) { $(this).parents('p').addClass('warning'); } }); 

Si está seguro de que siempre funcionará en un elemento de campo de texto, puede usar este this.value .

 $('#apply-form input').blur(function() { if( !this.value ) { $(this).parents('p').addClass('warning'); } }); 

También debe tener en cuenta que $('input:text') toma múltiples elementos, especifica un contexto o usa la palabra clave this si solo desea una referencia a un elemento solitario (siempre que haya un campo de texto en los descendientes / hijos del contexto).

Todos tienen la idea correcta, pero me gusta ser un poco más explícito y recortar los valores.

 $('#apply-form input').blur(function() { if(!$.trim(this.value).length) { // zero-length string AFTER a trim $(this).parents('p').addClass('warning'); } }); 

si no usa .length, entonces una entrada de ‘0’ puede marcarse como mala, y una entrada de 5 espacios podría marcarse como correcta sin $ .trim. La mejor de las suertes.

Hacerlo en blur es demasiado limitado. Asume que hubo un enfoque en el campo de formulario, por lo que prefiero hacerlo en el envío y hacer un mapa a través de la entrada. Después de años de lidiar con desenfoque de fantasía, enfoque, etc. trucos, mantener las cosas más simples dará más facilidad de uso donde cuente.

 $('#signupform').submit(function() { var errors = 0; $("#signupform :input").map(function(){ if( !$(this).val() ) { $(this).parents('td').addClass('warning'); errors++; } else if ($(this).val()) { $(this).parents('td').removeClass('warning'); } }); if(errors > 0){ $('#errorwarn').text("All fields are required"); return false; } // do the ajax.. }); 
 if ($('input:text').val().length == 0) { $(this).parents('p').addClass('warning'); } 

¿Cómo es que nadie mencionó

 $(this).filter('[value=]').addClass('warning'); 

me parece más jquery

puedes usar también …

 $('#apply-form input').blur(function() { if( $(this).val() == '' ) { $(this).parents('p').addClass('warning'); } }); 

si tiene dudas sobre los espacios, intente …

 $('#apply-form input').blur(function() { if( $(this).val().trim() == '' ) { $(this).parents('p').addClass('warning'); } }); 

Considere utilizar el complemento de validación jQuery en su lugar. Puede ser un poco exagerado para los campos requeridos simples, pero es lo suficientemente maduro como para manejar casos extremos en los que aún no ha pensado (ni ninguno de nosotros hasta que nos topamos con ellos).

Puede etiquetar los campos obligatorios con una clase de “obligatorio”, ejecutar $ (‘formulario’). Validar () en $ (documento). Listo () y eso es todo lo que necesita.

Incluso está alojado en Microsoft CDN, para una entrega rápida: http://www.asp.net/ajaxlibrary/CDN.ashx

El evento de keyup detectará si el usuario también ha borrado la casilla (es decir, el retroceso plantea el evento pero el retroceso no aumenta el evento de pulsación de tecla en IE).

  $("#inputname").keyup(function() { if (!this.value) { alert('The box is empty'); }}); 

El pseudo-selector :empty se usa para ver si un elemento no contiene elementos secundarios, debe verificar el valor:

 $('#apply-form input').blur(function() { if(!this.value) { // zero-length string $(this).parents('p').addClass('warning'); } }); 

Hay otra cosa en la que quizás desee pensar: actualmente solo puede agregar la clase de advertencia si está vacía, ¿qué le parece si quita la clase cuando el formulario ya no esté vacío?

Me gusta esto:

 $('#apply-form input').blur(function() { if( !$(this).val() ) { $(this).parents('p').addClass('warning'); } else if ($(this).val()) { $(this).parents('p').removeClass('warning'); } }); 
 function checkForm() { return $('input[type=text]').filter(function () { return $(this).val().length === 0; }).length; } 

Aquí hay un ejemplo usando keyup para la entrada seleccionada. También usa un recorte para asegurarse de que una secuencia de caracteres de espacio en blanco no desencadene una respuesta verdadera. Este es un ejemplo que se puede usar para comenzar un cuadro de búsqueda o algo relacionado con ese tipo de funcionalidad.

 YourObjNameSpace.yourJqueryInputElement.keyup(function (e){ if($.trim($(this).val())){ // trimmed value is truthy meaning real characters are entered }else{ // trimmed value is falsey meaning empty input excluding just whitespace characters } } 
 $(function() { var fields = $('#search_form').serializeArray(); is_blank = true; for (var i = 0; i < fields.length; i++) { // excluded fields if ((fields[i].name != "locale") && (fields[i].name != "utf8")) { if (fields[i].value) { is_blank = false; } } } if (is_blank) { $('#filters-button').append(': OFF'); } else { $('#filters-button').append(': ON'); } }); 

Verifique si todos los campos están vacíos y añádalos a Activado o Desactivado en Filter_button

Puedes probar algo como esto:

 $('#apply-form input[value!=""]').blur(function() { $(this).parents('p').addClass('warning'); }); 

Aplicará el evento .blur() solo a las entradas con valores vacíos.

 // :) 

Con HTML 5 podemos usar una nueva función “requerida”, simplemente agréguela a la etiqueta que desea que se le solicite, como: