Msg de erro input required

[Ronaldo Bueno 23]

Veja se alguém consegue me ajudar:

 

Fiz um form html5 em abas e coloquei o submit na ultima aba (o cliente pediu assim)

 

Alguns campos são required e outros não.

 

Quando clico no enviar, aparece o erro dos inputs que são obrigatórios, mas mostra no campo e ele esta em outra aba, então da a impressão que não funciona, mas se voltar as abas os erros estão la.

 

A pergunta: teria uma forma de mostrar os erros em uma div ? Ou em qualquer outro lugar que não fique escondido?

 

Obrigado

[lokaodomau 61]

Tentou colocar uma DIV só para erros antes do elemento onde constam as abas?

[Khwesten Heiner 9]

Cara, até onde eu li do html5, ele só vai mostrar essas mensagens próximas aos campos. Mas o que você poderia fazer é como o colega ai em cima disse, criar uma div e fazer uma validação com JS colocando o erro nessa div, porque nesse caso, ele processava antes de mandar para o php.

 

Ou até mesmo com JS, você só deixar o botão de enviar aparecer, quando tudo estiver setado.

 

Ou ainda, dependendo de como sejam as abas, só deixar avançar para próxima aba quando os campos já estiverem preenchidos...

[Ronaldo Bueno 23]

Justamente o que não queria é usar js para validar, ja que tem o html5.

 

A opção de nao deixar clicar na outra aba seria uma boa, será que poderia me dar um exemplo?

 

E o botao submit só aparecer quando for preenchido, teria que fazer a validação ?

 

Lembrando que nao são todos os campos que são obrigatórios.

 

Obrigado por responder.

[Khwesten Heiner 9]

Cara, infelizmente não sou o cara mais apropriado para tentar te ensinar como fazer isso, sou meio fraco com JS, mas vou tentar exemplificar ao máximo.

 

Você colocaria um atributo onclick na aba ou em um botão que exemplificasse um avançar e setaria nele uma função JS, tipo:

onClick="validarCamposParaAvancar()"

E com o JS você faria algo do tipo:

<script>

function validarCamposParaAvancar(){
	
	//Aqui pega o valor do campo pelo id, faça isso para cada campo.
	var campo = document.getElementById('idCampo').value;
	var campo2 = document.getElementById('idCampo2').value;
	
	if(campo == aoQueVoceQuer){
		//Aqui to usando alert como exemplo...
		
		alert("O campo tal não foi preenchido corretamente!");
		//Mas você pode criar uma div e adicionar o texto a ela
		//ex:
		//document.getElementById("idDaDiv").innerHTML = "Texto que você quer mostrar!";
	} else if(campo2 == aoQueVoceQuer2) {
		//mesma coisa, só tratamento...
	} else {
		//Esse código aqui embaixo peguei de outro site: http://goo.gl/pOCe6X
		document.getElementById("divDaAbaAtual").style.visibility="hidden";
		document.getElementById("divDaProximaAba").style.visibility="";
	}
	
}

</script>

Da uma lida nisso aqui:

 

http://www.w3schools.com/jsref/dom_obj_style.asp

http://www.w3schools.com/js/js_functions.asp

 

Lembrando que você pode tentar usar JQuery, que facilitaria alguns comandos desse ai, já que ele é uma LIB do JS.

[Ronaldo Bueno 23]

Obrigado pelas dicas, mas ainda não encontrei o que quero.

 

Estou fazendo de tudo para não usar js nessa parte.

[lokaodomau 61]

Ronaldo, não mexo muito com HTML, não sei se há outra forma de validar as informações, mas eu acho que pra validações, existe o JavaScript e/ou validando no código mesmo.

[Ronaldo Bueno 23]

Beleza, obrigado mesmo assim, vou continuar tentando. Valeu

[Khwesten Heiner 9]

Acho que vai ser meio impossível sem usar JS, a menos que você coloque tudo em uma única página, mas ok...

[Ronaldo Bueno 23]

Realmente não consegui, mas fiz assim, coloquei um * apenas para sinalizar que o campo é obrigatório.

 

Obrigado, abs.