Desactivar enviar si las entradas están vacías jquery

Question

Descargo de responsabilidad: Sé que hay bastantes preguntas con respecto a este tema y se ha tratado mucho, aunque necesito ayuda en mi caso particular.

Estoy tratando de verificar si los valores de entrada están vacíos en la tecla y luego desactivar el botón de enviar.

Mi fragmento HTML:

<div class='form'> 
    <form> 
    <div class='field'> 
     <label for="username">Username</label> 
     <input id="username" type="text" /> 
    </div> 
    <div class='field'> 
     <label for="password">Password</label> 
     <input id="password" type="password" /> 
    </div> 
    <div class='actions'> 
     <input type="submit" value="Login" /> 
    </div> 
    </form> 
</div> 

he utilizado el ejemplo de respuesta de here con algunas modificaciones:

(function() { 
    $('.field input').keyup(function() { 

     var empty = false; 
     $('.field input').each(function() { 
      if ($(this).val() == '') { 
       empty = true; 
      } 
     }); 

     if (empty) { 
      $('.actions input').attr('disabled', true); 
     } else { 
      $('.actions input').attr('disabled', false); 
     } 
    }); 
})() 

Cualquier ayuda sería muy apreciada!

Answer 1

Sugeriría deshabilitar el botón por defecto. También me gustaría ver la longitud del .val(), no verificar si hay una cadena vacía. Por último, creo que document.ready() es mucho más fácil de leer que el código existente: Aquí está el código completo:

HTML

<div class='form'> 
    <form> 
    <div class='field'> 
     <label for="username">Username</label> 
     <input id="username" type="text" /> 
    </div> 
    <div class='field'> 
     <label for="password">Password</label> 
     <input id="password" type="password" /> 
    </div> 
    <div class='actions'> 
     <input type="submit" value="Login" disabled="disabled" /> 
    </div> 
    </form> 
</div>​ 

JS/jQuery

$(document).ready(function() { 
    $('.field input').keyup(function() { 

     var empty = false; 
     $('.field input').each(function() { 
      if ($(this).val().length == 0) { 
       empty = true; 
      } 
     }); 

     if (empty) { 
      $('.actions input').attr('disabled', 'disabled'); 
     } else { 
      $('.actions input').removeAttr('disabled'); 
     } 
    }); 
}); 

Aquí está a working fiddle.

Answer 2

Lo uso en mi proyecto y lo logra.

$(document).ready(function() { 
    $('.field').keyup(function() { 

    var empty = false; 
    $('.field').each(function() { 
     if ($(this).val().length == 0) { 
      empty = true; 
     } 
    });     

    if (empty) { 
     $('.actions[type="submit"]').attr('disabled', 'disabled'); 
    } else { 
     $('.actions[type="submit"]').removeAttr('disabled'); 
    }     
    }); 
});