[Resolvido] Aciona botão com jQuery

[janick 1]

Olá.

 

Tenho campos de formulário que estão sendo validados no Blur

Fiz de uma forma que, só libera o botão de acesso, quando todos os campos estiverem validados.

 

Porém estou imaginando se no último campo o usuário não tirar o foco, não vai rodar a validação e não vai habilitar o botão.

Existe alguma função em jQuery que me permita habilitar este botão independente se o usuário tirou o foco do input ou não?

[William Bruno 1501]

Existe alguma função em jQuery que me permita habilitar este botão independente se o usuário tirou o foco do input ou não?

temos que pensar em eventos.

 

No caso, eu trocaria o blur do ultimo campo por um keypress ou algo do tipo, pois qq coisa q o cara digitar já dispara a validação, e habilita o botão ai.

[janick 1]

obrigado pela resposta, em parte funcionou, só não para campos Select.

 

como fazer para estas situações?

[William Bruno 1501]

para select, você tem q usar o evento onchange.

[janick 1]

testei o Change do jQuery mas para os inputs esta funcionando como Blur...

 

seria correto eu fazer um if para identificar se o campo é input ou select ou é código desnecessário?

[William Bruno 1501]

depende.. não conheço a tua rotina.

 

mas se for select, você deve usar onchange;

 

se for input, você deve usar onblur ou onkeypress como sugeri.

[janick 1]

o código é esse

 

 

 

	$('.obrigatorio').addClass('pendente');

$('.obrigatorio').focus(function() {

	// silêncio

}).blur(function() {

	if($(this).val() == "" || $(this).val() == "Selecione" || $(this).val() == "Número") {

		if(!$(this).hasClass('faltou')) {

			$(this).parent().css('background-color', 'red').animate({ backgroundColor: '#f9f9f9' }, 1000);
			$(this).css('border-color', 'red');
			$(this).addClass('faltou');
			$(this).addClass('pendente');

		}

	} else {

		$(this).removeClass('pendente');

		if($(this).hasClass('faltou')) {

			$(this).parent().css('background-color', 'green').animate({ backgroundColor: '#f9f9f9' }, 1000);
			$(this).css('border-color', '#d0d0d0');
			$(this).removeClass('faltou');
			$(this).removeClass('pendente');

		}

	}

	if($('.pendente').length == 0) {

		alert($('.pendente').length);

		$(".btn-proximo-passo").css('cursor','pointer').attr("disabled", false);
		$('.btn-proximo-passo').fadeTo("slow", 1);

	}

	else {

		$(".btn-proximo-passo").css('cursor','default').attr("disabled", true);
		$('.btn-proximo-passo').fadeTo("slow", 0.3);

	}

});

// Quando acessa a página, o botão de próximo passo já abre desabilitado

$('.btn-proximo-passo').fadeTo("slow", 0.3);

[William Bruno 1501]

sim, então você deve fazer a verificação, para se for select, usar o evento onchange.

 

você pode fazer essa verificação direto no seletor:

 

$('input.obrigatorio')....

$('select.obrigatorio')....

[janick 1]

dupliquei entao a verificação, a mesma coisa só mudando o seletor

 

ficou o código abaixo, ele zera as classes "pendente", porém não aciona o botão, não entendi....

 

	// Começa verificação para input

$('input.obrigatorio').keypress(function() {

	if($(this).val() == "" || $(this).val() == "Selecione" || $(this).val() == "Número") {

		if(!$(this).hasClass('faltou')) {

			$(this).parent().css('background-color', 'red').animate({ backgroundColor: '#f9f9f9' }, 1000);
			$(this).css('border-color', 'red');
			$(this).addClass('faltou');
			$(this).addClass('pendente');

		}

	} else {

		$(this).removeClass('pendente');

		if($(this).hasClass('faltou')) {

			$(this).parent().css('background-color', 'green').animate({ backgroundColor: '#f9f9f9' }, 1000);
			$(this).css('border-color', '#d0d0d0');
			$(this).removeClass('faltou');
			$(this).removeClass('pendente');

		}

	}

	if($('.pendente').length == 0) {

		$('.btn-proximo-passo').css('cursor','pointer').attr("disabled", false);
		$('.btn-proximo-passo').fadeTo("slow", 1);

	}

	else {

		$('.btn-proximo-passo').css('cursor','default').attr("disabled", true);
		$('.btn-proximo-passo').fadeTo("slow", 0.3);

	}

});

// Termina verificação para input

// Começa verificação para select

$('select.obrigatorio').change(function() {

	if($(this).val() == "" || $(this).val() == "Selecione" || $(this).val() == "Número") {

		if(!$(this).hasClass('faltou')) {

			$(this).parent().css('background-color', 'red').animate({ backgroundColor: '#f9f9f9' }, 1000);
			$(this).css('border-color', 'red');
			$(this).addClass('faltou');
			$(this).addClass('pendente');

		}

	} else {

		$(this).removeClass('pendente');

		if($(this).hasClass('faltou')) {

			$(this).parent().css('background-color', 'green').animate({ backgroundColor: '#f9f9f9' }, 1000);
			$(this).css('border-color', '#d0d0d0');
			$(this).removeClass('faltou');
			$(this).removeClass('pendente');

		}

	}

	if($('.pendente').length == 0) {

		$('.btn-proximo-passo').css('cursor','pointer').attr("disabled", false);
		$('.btn-proximo-passo').fadeTo("slow", 1);

	}

	else {

		$('.btn-proximo-passo').css('cursor','default').attr("disabled", true);
		$('.btn-proximo-passo').fadeTo("slow", 0.3);

	}

});

// Termina verificação para select

[William Bruno 1501]

não cara!! não duplique não!!

 

principio básico de programação...

 

var verificacao = function(){

               if($(this).val() == "" || $(this).val() == "Selecione" || $(this).val() == "Número") {

                       if(!$(this).hasClass('faltou')) {
                               $(this).parent().css('background-color', 'red').animate({ backgroundColor: '#f9f9f9' }, 1000);
                               $(this).css('border-color', 'red');
                               $(this).addClass('faltou');
                               $(this).addClass('pendente');
                       }
               } else {
                       $(this).removeClass('pendente');
                       if($(this).hasClass('faltou')) {

                               $(this).parent().css('background-color', 'green').animate({ backgroundColor: '#f9f9f9' }, 1000);
                               $(this).css('border-color', '#d0d0d0');
                               $(this).removeClass('faltou');
                               $(this).removeClass('pendente');
                       }
               }
               if($('.pendente').length == 0) {
                       $('.btn-proximo-passo').css('cursor','pointer').attr("disabled", false);
                       $('.btn-proximo-passo').fadeTo("slow", 1);
               }
               else {
                       $('.btn-proximo-passo').css('cursor','default').attr("disabled", true);
                       $('.btn-proximo-passo').fadeTo("slow", 0.3);
               }
};

       $('input.obrigatorio').keypress( verificacao );
       $('select.obrigatorio').change( verificacao );

assim você consegue evitar a duplicação de script.

 

 

qnto a não habilitar, precisa debugar.

Aparece algum erro no console ?

 

 

Ctrl+Shift+J

[janick 1]

po valeu pela dica!!

 

fiz como você falou, mas estranhamente nao tá habilitando o botao... ele chega até lá, mostra o alert... mas nao habilita o botão

[William Bruno 1501]

ok, apareceu algum erro no console ?

 

Ctrl+Shift+J no Firefox:

http://wbruno.com.br/blog/2011/03/31/como-debugar-javascript-firefox-erros-comuns/

 

 

caso não, tente o seguinte:

$('.btn-proximo-passo').css('cursor','pointer').removeAttr('disabled');

[janick 1]

Debuguei mas não deu nada relacionado ao arquivo Javascript

[William Bruno 1501]

tentou com o removeAttr() ?

[janick 1]

Tentei

mas nao rolou ainda

 

o que mais me intriga é que ele entra no IF e lê um alert que coloquei pra testar.

 

 

tentou com o removeAttr() ?

[William Bruno 1501]

como está o seu html ? poste aqui.

 

o trecho do botão e tal..

[janick 1]

Cara é alguma m***** que to fazendo.

 

html

<button type="button" class="dir btn-proximo-passo">Próximo Passo</button>

 

joguei css em outros elementos e funcionou maravilha...

 

o button esta com 0.3 de fade

$('.btn-proximo-passo').fadeTo("slow", 0.3);

 

e quero que ele vá para fade normal quando estiver tudo ok

$('.btn-proximo-passo').fadeTo("slow", 1);

[William Bruno 1501]

e como você sabe q o botão ta habilitado ou não?

 

você ta vendo o atributo com o Firebug ?

tem alguma ação nesse botão ? qual ?

[janick 1]

Cara não tem ação nenhuma no botão.

 

Fiz um teste ao invés de fadeTo, usei animate e funcionou!

 

É válido usar animate?

[William Bruno 1501]

é válido sim.

 

que bom q resolveu. :lol: