7

He estado mirando un montón de preguntas para este mismo tema y no he encontrado nada así que me veo obligado a formular una nueva...

Tengo un formulario tal que así :

var value=$.trim($(".form-control").val());
if(value.length>0)
{
    $("#user-data-next-button").attr('disabled', true);
} else{
    $("#user-data-next-button").attr('disabled', false);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form action="userdevdata.php" method="post">
	<label>Email</label>
	<input type="email" class="form-control" name="email"/>
	<label>Full name</label>
	<input type="text" class="form-control" name="name"/>
	<label>Address</label>
	<input type="text" class="form-control" name="address"/>
	<label>Postal code</label>
	<input type="number" class="form-control" name="cp"/>
	<label>City</label>
	<input type="text" class="form-control" name="city"/>
	<label>Province</label>
	<input type="text" class="form-control" name="province"/>
</form>
<button id="user-data-next-button" class="btn my-button" disabled="true" ><i class="glyphicon glyphicon-chevron-right"></i><i class="glyphicon glyphicon-chevron-right"></i></button>
						

Lo que yo necesito es que, mientras todos los campos de mi formulario no estén completos, el botón esté desactivado (disabled). En cambio, cuando yo complete todos los campos del formulario, el botón se debe activar (disabled="false") para que sea pulsable.


     var userdevdata = 6;
 if($("#usermail").val().length > 0){ userdevdata = userdevdata-1;}
 if($("#username").val().length > 0){ userdevdata = userdevdata-1;}
 if($("#useraddress").val().length > 0){ userdevdata = userdevdata-1;}
 if($("#usercp").val().length > 0){ userdevdata = userdevdata-1;}
 if($("#usercity").val().length > 0){ userdevdata = userdevdata-1;}
 if($("#userprovince").val().length > 0){ userdevdata = userdevdata-1;}
 if(userdevdata == 0){
     $('#user-data-next-button').attr('disabled', false);
 } else {
     $('#user-data-next-button').attr('disabled', true);
 }

No me manejo muy bien con esto de los comentarios. He hecho esto y no me funciona no sé si está bien o mal.

GRacias.

1
  • echale un ojo a Jquery validation igual puede servir para tu proposito
    – Joacer
    Commented el 14 oct. 2016 a las 8:02

5 respuestas 5

7

Para ello, necesitas saber la longitud de caracteres que hay en cada uno de los inputs de tu formulario.

Basándome en tu HTML, te incluyo un pequeño script en jQuery que te permitirá eso:

$(document).ready(function() {
    //Siempre que salgamos de un campo de texto, se chequeará esta función
    $("#form input").keyup(function() {
        var form = $(this).parents("#form");
        var check = checkCampos(form);
        if(check) {
            $("#user-data-next-button").prop("disabled", false);
        }
        else {
            $("#user-data-next-button").prop("disabled", true);
        }
    });
});

//Función para comprobar los campos de texto
function checkCampos(obj) {
    var camposRellenados = true;
    obj.find("input").each(function() {
    var $this = $(this);
        if( $this.val().length <= 0 ) {
            camposRellenados = false;
            return false;
        }
    });
    if(camposRellenados == false) {
        return false;
    }
    else {
        return true;
    }
}

Deberás añadir un ID al formulario, o una clase y lo cambias en el código.

A groso modo, este código lo que hace es buscar todos los campos inputs y chequea si su longitud es mayor a 0 (ha escrito algo), y si todos los campos están rellenados, entonces, le quita la propiedad disabled al botón.

Añado un enlace al jsFiddle por si necesitas trastear con él.

5
  • Gracias, funciona bien, pero el problema es que el botón no se activa cuando clico en el, si no cuando le doy a tabulación, es decir para un usuario normal (gente que no sabe que existe la tecla tabulación) les será imposible pulsar el botón...
    – Pavlo B.
    Commented el 14 oct. 2016 a las 8:37
  • Vale no solo funciona con tabulación pero antes de poder darle al botón tengo que clickar fuera del formulario y luego el botón, como puedo solucionar esto?
    – Pavlo B.
    Commented el 14 oct. 2016 a las 8:39
  • He actualizado la respuesta, en vez de un blur() utiliza un keyup() y el botón será clickable mientras escribe si están los campos rellenos
    – Zander
    Commented el 14 oct. 2016 a las 8:40
  • Gracias, yo he probado y también me funciona con .hover()
    – Pavlo B.
    Commented el 14 oct. 2016 a las 8:41
  • De nada, estamos para ayudarnos!
    – Zander
    Commented el 14 oct. 2016 a las 8:46
1

Puedes crear una variable numérica igual al numero de campos que tienes, cada vez que un campo no este vacío.

if($("#nombre").val().length > 0)

restas uno a la variable numérica y compruebas si es igual a cero. si es igual a cero quitas el disabled.

3
  • No sé si está bien, ya que en jquery soy algo nuevo y no me lo manejo demasiado bien, pero lo que he hecho no me funciona
    – Pavlo B.
    Commented el 14 oct. 2016 a las 8:24
  • var userdevdata = 6; if($("#usermail").val().length > 0){ userdevdata = userdevdata-1;} if($("#username").val().length > 0){ userdevdata = userdevdata-1;} if($("#useraddress").val().length > 0){ userdevdata = userdevdata-1;} if($("#usercp").val().length > 0){ userdevdata = userdevdata-1;} if($("#usercity").val().length > 0){ userdevdata = userdevdata-1;} if($("#userprovince").val().length > 0){ userdevdata = userdevdata-1;} if(userdevdata == 0){ $('#user-data-next-button').attr('disabled', false); } else { $('#user-data-next-button').attr('disabled', true);
    – Pavlo B.
    Commented el 14 oct. 2016 a las 8:25
  • tendrias que usar la propiedad change de jquery api.jquery.com/change para saber en que momento ha cambiado Commented el 14 oct. 2016 a las 8:28
0

Lo más directo es preguntar por cada uno de los campos para saber si se han rellenado y si alguno está vacío almacenarlo en una variable y en función de su valor mostrar o no el botón. ...

El el formulario añade ids

input type="email" class="form-control" name="email" id="email"/>

... con jquery para campo del formulario

var contador=0
    if ($("#email").val().length<1) {contador=1}

or

if ($("#email").val()=="") {contador=1}

if (contador==0) {//muestras el botón}
else {//no muestras el botón}

Si preguntas por la clase que es común a todos los campos tomará el valor de un solo campo, no de todos.

0
var $inputs = $('#SignupForm').find('table').children().find(':input[type="text"]') //INPUTS
var $selects = $('#SignupForm').find('table').children().find('select') //SELECTS

$inputs.each(function(index, element) {
    if ($(element).val().length <= 0) {
            $(element).css("border", "solid 2px #FA5858");
    }
});

$selects.each(function(index, element) {
    if ( $(element).val() ==0) {
            $(element).css("border", "solid 2px #FA5858");
    }
});
1
  • 1
    Aun que buen código habla para si mismo, tu respuesta sería más fácil de entender para un publico de amplio espectro en sus conocimientos si explicas con un par de palabras donde exactamente era el problema y como lo solucionas. Commented el 13 feb. 2017 a las 17:32
0

Puedes usar el evento input para hacer las comprobaciones:

$('input').on('input', function(){
  
    $('input').each(function() {
      
      var boton      = $( '#user-data-next-button' );
      var esta_vacio = $( this ).prop( 'value' ) === '';
      
      boton.prop('disabled', esta_vacio);        
    });
});

$('button').on('click', function(){  
  console.log('Enviado!!');
});
input{display:block}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <label>Email</label>
	<input type="email" class="form-control" name="email"/>
	<label>Full name</label>
	<input type="text" class="form-control" name="name"/>
	<label>Address</label>
	<input type="text" class="form-control" name="address"/>
	<label>Postal code</label>
	<input type="number" class="form-control" name="cp"/>
	<label>City</label>
	<input type="text" class="form-control" name="city"/>
	<label>Province</label>
	<input type="text" class="form-control" name="province"/>
</form>  
<button id="user-data-next-button" class="btn my-button" disabled>Enviar</button>

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.