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

Tengo un formulario en el que me gustaría que se rellenen 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 complete o no.

¿Qué estoy haciendo mal?

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

Y no necesariamente necesita .lengtho ver si es >0porque una cadena vacía se evalúa como falsa de todos modos, pero si desea 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 usarlo 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 varios elementos, especifica un contexto o usa la thispalabra clave 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 incorrecta, y una entrada de 5 espacios podría marcarse como correcta sin $ .trim. La mejor de las suertes.

Hacerlo en el desenfoque es demasiado limitado. Se supone que hubo un enfoque en el campo del formulario, por lo que prefiero hacerlo al enviar y asignar a través de la entrada. Después de años de lidiar con sofisticados trucos de desenfoque, enfoque, etc., mantener las cosas más simples producirá más usabilidad donde sea importante.

$('#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');
}

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');
    }
});

como nadie menciono

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

me parece más jquery

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

    $("#inputname").keyup(function() {

if (!this.value) {
    alert('The box is empty');
}});

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

Puede etiquetar los campos obligatorios con una clase de "obligatorio", ejecutar un $ ('formulario'). Validar () en $ (documento) .ready () y eso es todo lo que se necesita.

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

El :emptypseudo-selector se usa para ver si un elemento no contiene hijos, 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 es posible que desee pensar, actualmente solo puede agregar la clase de advertencia si está vacía, ¿qué tal si elimina la clase nuevamente 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');
    }
});

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 puede usarse 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');
  }
});

Compruebe si todos los campos están vacíos y agregue ON u OFF en Filter_button

Puedes probar algo como esto:

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

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

<script type="text/javascript">
$('input:text, input:password, textarea').blur(function()
    {
          var check = $(this).val();
          if(check == '')
          {
                $(this).parent().addClass('ym-error');
          }
          else
          {
                $(this).parent().removeClass('ym-error');  
          }
    });
 </script>// :)

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

<input type='text' required>

Gran colección de respuestas, me gustaría agregar que también puede hacerlo usando el :placeholder-shownselector CSS. Un poco más limpio para usar IMO, especialmente si ya está usando jQ y tiene marcadores de posición en sus entradas.

if ($('input#cust-descrip').is(':placeholder-shown')) {
  console.log('Empty');
}

$('input#cust-descrip').on('blur', '', function(ev) {
  if (!$('input#cust-descrip').is(':placeholder-shown')) {
    console.log('Has Text!');
  }
  else {
    console.log('Empty!');
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input type="text" class="form-control" id="cust-descrip" autocomplete="off" placeholder="Description">

También puede utilizar los selectores :validy :invalidsi tiene entradas que son necesarias. Puede usar estos selectores si está usando el atributo requerido en una entrada.

Una solución limpia de solo CSS sería:

input[type="radio"]:read-only {
        pointer-events: none;
}