1

Tengo un formulario que cuando el usuario no ha terminado todos los campos el botón de envió esta en disabled hasta hay todo bien pero quiero que cuando el usuario le de click se ejecute una function que le muestre los input que faltan en rojo para que los termine de rellenar.

Pero no logro ejecutar ninguna function cuando esta disabled ¿Hay alguna forma de hacerlo?

Les dejo un ejemplo de mas o menos lo que necesito e igual no me sale el console.log().

De antemano muchas gracias.

$("#enviar").click(function(){
  console.log("click en el boton que esta disabled")
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="con-formulario">
    <label for="">Nombre</label>
    <input type="text" name="" value="">
    <label for="">Correo</label>
    <input type="text" name="" value="">
    <label for="">Clave</label>
    <input type="text" name="" value="">
  </div>
  
  <button disabled id="enviar" type="button" name="button">Enviar disabled</button>

3

1 respuesta 1

2

Un botón deshabilitado no genera el evento click, precisamente por estar deshabilitado.

No le veo mucho sentido a hacer algo así. Si deshabilitas un botón es para que el usuario entienda que no se puede pulsar, no tiene mucho sentido añadirle funcionalidad.

En cualquier caso, si lo quieres hacer así, puedes simular el comportamiento del atributo disabled con estilos css, dando apariencia de deshabilitado al botón y diferenciando el comportamiento del botón en el evento click en función de si tiene un estilo u otro.

Algo así:

$(function(){
  $("input").change(function(){
    $("input").filter(function(){ return !this.value;}).length
      ? $("#enviar").addClass("disabled")
      : $("#enviar").removeClass("disabled");
  });
  $("#enviar").click(function(){
    if ($(this).hasClass("disabled")){
      $("input").filter(function(){ return !this.value;})
        .addClass("empty");
      $("input").filter(function(){ return !!this.value;})
        .removeClass("empty");
      console.log("quedan campos por rellenar");
      return;
    }
    $("input").removeClass("empty");
    console.log("Todo en orden. Enviar formulario")
  });
});
input, button{
  display: block;
  margin: 4px;
}

#enviar.disabled{
  color: #666666;
}

input.empty{
  background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="con-formulario">
    <label for="">Nombre</label>
    <input type="text" name="" value="">
    <label for="">Correo</label>
    <input type="text" name="" value="">
    <label for="">Clave</label>
    <input type="text" name="" value="">
  </div>
  
  <button id="enviar" class="disabled" type="button" name="button">Enviar</button>

1

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.