Problemas com JQUERY

[fabiapo 0]

Pessoal,

 

Estou desenvolvendo uma função com Jquery onde toda a vez que um campo text perde seu foco (com TAB por exemplo), é executada uma ação para validar/complementar o campo.

 

Porém, quando o usuário não dá um TAB no campo para perder o foco e clica direto no botão submit não ocorre a validação do conteúdo do campo text.

 

Existe alguma forma de, quando o usuário digitar alguma coisa no campo text e clicar direto no botão submit eu faça esta validação sem colocar redundância no meu código?

 

Segue o código para exemplificar com evento no meu campo text:

 

$("#txt_Pais").bind('change', function(){
		var str_pais = $("#txt_Pais").val(); // Pega o valor do campo txt_Pais.
		var valido = $("#EnviaForm").valid(); // Verifica se a validação do formulário foi ok, ou seja, true.
		
		//Se o campo pais for diferente de vazio e o formulario estiver passado pela validação
		if ((str_pais!='') && (valido==true))
		{	
			//Limpar os campos
			$("#hdn_acao").val('');
			$("#txt_id_pais").val('');
			$("#txt_nm_usuario_alteracao").val('');
			$("#txt_nm_usuario_inclusao").val('');
			$("#txt_dt_pais_inclusao").val('');
			$("#txt_dt_pais_alteracao").val('');

			//Acessa via POST o arquivo PHP de forma transparente para o site
			$.post("con_unico_pais.php",{pais:str_pais}, function(resposta){
				//Lê a estrutura XML que está no documento PHP e pega os valores.
				$(resposta).find( "principal" ).each(
					function()
					{
						var registros = $(this).find( "registros" ).text(); 
						var id_pais = $(this).find( "id_pais" ).text(); 
						var nm_pais = $(this).find( "nm_pais" ).text(); 
						var dt_pais_inclusao = $(this).find( "dt_pais_inclusao" ).text(); 
						var nm_usuario_inclusao = $(this).find( "nm_usuario_inclusao" ).text(); 
						var dt_pais_alteracao = $(this).find( "dt_pais_alteracao" ).text();
						var nm_usuario_alteracao = $(this).find( "nm_usuario_alteracao" ).text();
						var st_ativo = $(this).find( "st_ativo" ).text();
						
						if (registros=='con')
						{
							$("#hdn_acao").val(registros);
						
							window.open("con_pais.php?pais="+str_pais, "ListaPaises", "width=500, height=auto, autosize=yes, resizable=1, menubar=NO,toolbar=no,scrollbars=auto, toolbar=NO, location=NO");
						}
						
						if (registros=='alt')
						{
							$("#hdn_acao").val(registros);
							$("#txt_Pais").val(nm_pais);
							$("#txt_id_pais").val(id_pais);
							$("#txt_nm_usuario_alteracao").val(nm_usuario_alteracao);
							$("#txt_nm_usuario_inclusao").val(nm_usuario_inclusao);
							$("#txt_dt_pais_inclusao").val(dt_pais_inclusao);
							$("#txt_dt_pais_alteracao").val(dt_pais_alteracao);
									
							if (st_ativo=='A')
							{
								$("#rdo_ativo_a").attr("checked", true); 
							}
							else
							{
								if (st_ativo=='I')
								{
									$("#rdo_ativo_i").attr("checked", true); 
								}
							}
						}
		
						if (registros=='inc')
						{
							$("#hdn_acao").val(registros);
						}
				
					}
				);
			},"xml");
		}
	});

Obrigada!

[fabiapo 0]

Outro detalhe: Quando o botão é clicado e insiro um alert após a limpeza dos campos, aparece o alert com o conteúdo.

 

O problema ocorre ao chamar o método post.

 

Sei que ele está funcionando perfeitamente com TAB mas com o clicar do botão não.

 

Alguém sabe o porque?

 

É alguma falha do jquery?

[FabianoM 0]

Pelo que entendi você quer validar seu formulário ao clicar no submit tbm certo??

 

Bom, eu utilizo jQuery e sempre valido meus formulários da seguinte forma:

 

//Submit do formulário com ID
$("#FormularioID").submit(function()
{		
		//Verifico se tem valor no meu campo
	if(!$("#id_campo").val())
	{
		//Se nao tiver mostro uma mensagem;
		$("#msg-status").text('Por favor preencha o campo Nome.');
		//Dou foco no campo não validado
		$("#id_campo").focus();
		//não realizo o submit do formulario
		return false;
	}
	//submit
	return true;
});

Não sei se é bem oq precisa, mas quem sabe possa te ajudar, já que realiza a validação no momento do SUBMIT, ai é só adaptar com a validação q você desejar.

 

Abraço!

[fabiapo 0]

Fabiano,

 

Na verdade é assim:

 

- Quando tiro o foco do campo (evento blur ou change) ele deve acessar um PHP via método POST e retornar um XML com as informações do banco e preencher os campos do formulário.

 

O grande problema é que quando o usuário não utiliza o click fora do campo ou o TAB e clica direto no botão submit, o JQUERY até acessa o meu PHP via post mas não lê o XML e não me diz se os valores constam ou não na base de dados.

 

Teoricamente ele deveria funcionar pois retirei o foco do meu campo para clicar no botão enviar, mas não sei porque motivo neste caso não funciona.

 

Existe alguma particularidade do retorno do método post do ajax?

 

Obrigada!

[srnetcave 1]

voce tem que criar o evento para validar os campos.....e um no evento submit no formulario que valide tudo....algo como o FabianoM mostrou acima...bem simples...

[fabiapo 0]

srnetcave,

 

Eu coloquei a validação de todos os campos com o jquery.validate.

 

O problema está acontecendo no $.post que até acessa a minha página PHP mas não traz o retorno no evento submit do form.

 

Incrivelmente, ele só funciona quando ocorre o evento change via TAB, se eu pressionar o botão enviar ou fizer a validação no submit o retorno não vem nada, sendo que deveria vir da mesma forma.

[fabiapo 0]

Pessoal,

 

Só para mostrar o código:

$("#EnviaForm").submit(function(){

var str_pais = $("#txt_Pais").val(); // Pega o valor do campo txt_Pais.

var bln_valido = $("#EnviaForm").valid(); // Verifica se a validação do formulário foi ok, ou seja, true.

 

//Se o campo pais for diferente de vazio e o formulario estiver passado pela validação

if ((str_pais!='') && (bln_valido==true))

{

//Limpar os campos

$("#hdn_acao").val('');

$("#txt_id_pais").val('');

$("#txt_nm_usuario_alteracao").val('');

$("#txt_nm_usuario_inclusao").val('');

$("#txt_dt_pais_inclusao").val('');

$("#txt_dt_pais_alteracao").val('');

 

//Acessa via POST o arquivo PHP de forma transparente para o site

$.post("con_unico_pais.php",{pais:str_pais}, function(resposta){

//Lê a estrutura XML que está no documento PHP e pega os valores.

 

$(resposta).find("principal").each(

function()

{

var registros = $(this).find( "registros" ).text();

var id_pais = $(this).find( "id_pais" ).text();

var nm_pais = $(this).find( "nm_pais" ).text();

var dt_pais_inclusao = $(this).find( "dt_pais_inclusao" ).text();

var nm_usuario_inclusao = $(this).find( "nm_usuario_inclusao" ).text();

var dt_pais_alteracao = $(this).find( "dt_pais_alteracao" ).text();

var nm_usuario_alteracao = $(this).find( "nm_usuario_alteracao" ).text();

var st_ativo = $(this).find( "st_ativo" ).text();

 

if (registros=='con')

{

$("#hdn_acao").val(registros);

 

lst_Paises = window.open("con_pais.php?pais="+str_pais, "ListaPaises", "width=500, height=400, autosize=yes, resizable=1, menubar=NO,toolbar=no,scrollbars=yes, toolbar=NO, location=NO");

}

 

if (registros=='alt')

{

$("#hdn_acao").val(registros);

$("#txt_Pais").val(nm_pais);

$("#txt_id_pais").val(id_pais);

$("#txt_nm_usuario_alteracao").val(nm_usuario_alteracao);

$("#txt_nm_usuario_inclusao").val(nm_usuario_inclusao);

$("#txt_dt_pais_inclusao").val(dt_pais_inclusao);

$("#txt_dt_pais_alteracao").val(dt_pais_alteracao);

 

if (st_ativo=='A')

{

$("#rdo_ativo_a").attr("checked", true);

}

else

{

if (st_ativo=='I')

{

$("#rdo_ativo_i").attr("checked", true);

}

}

}

 

if (registros=='inc')

{

$("#hdn_acao").val(registros);

}

}

);

},"xml");

}

});

 

Acredito que o que possa estar acontecendo é que ele está indo para a próxima página e não está lendo o conteúdo de retorno (variável resposta).

 

Existe alguma forma de não ir para a próxima página enquanto esta validação não estiver ok?

 

Obrigada!

[fabiapo 0]

Pessoal,

 

Descobri outra coisa:

 

Quando eu preencho o campo e clico diretamente no botão enviar, se eu clicar rapidamente, o script não funciona. Se eu clicar mais devagar, ele funciona. Parece que ele aciona o evento blur apenas quando clicamos lentamente.

 

Alguém sabe o porque?

 

Obrigada!

[fabiapo 0]

Pessoal,

 

Descobri o motivo do problema:

 

Quando você coloca o foco em um botão, ele tem uma área de dimensionamento do foco(aquele pontilhado que fica ao clicar) mas também tem umas áreas "cegas" onde estas linhas não aparecem (pelo menos isto acontece no FF).

 

Existe alguma forma de isto não acontecer, ou seja, o foco preencher todo o botão?

 

Ou seria melhor colocar uma imagem no lugar do botão?

 

Obrigada!