[Resolvido] Validação de form multi-campos

[Diego Macêdo 6]

Amigos,

 

vi aqui no fórum uns scripts que verificam o form e informa ao usuário que devem ser preenchidos, mas essa verificação é feita em um único campo e exibido o alerta.

 

Como poderíamos fazer para ele verificar quais campos estão em branco e exibir em um ÚNICO alerta os campos que estão vazios?

 

Abraços! ;)

[Fabio Morikawa 0]

olá,

 

basta você verificar um por um .. por exemplo..

 

var erro = "";

 

if(campo1.value == "")

erro += "campo 1 vazio\n";

 

if(campo2.value == "")

erro += "campo 2 vazio\n";

 

...etc...

 

alert(erro);

[Diego Macêdo 6]

Fabio,

 

nessa variável "campo1" seria o nome do id lá do campo do formulário, correto?

 

Só tem um problema. Mesmo com os campos vazios, ele enviará esse form. Como eu faço pra ele só enviar se estiver tudo preenchido?

 

HTML do formulário:

<form name="form1" method="post" action="formmail.php">
<p>Nome:
<input name="nome" type="text" id="nome" size="50" />
</p>
<p>E-mail:
<input name="email" type="text" id="email" size="50" />
</p>
<p>Mensagem:
<textarea name="mensagem" cols="40" rows="6" id="mensagem"></textarea>
</p>
<input type="submit" name="Submit" value="Enviar" />
</form>

java script:

<script language="JavaScript" type="text/javascript">
var erro = "Preencha os campos abaixo que estão vazios:\n";

if(nome.value == "")
erro += "- Nome \n";

if(telefone.value == "")
erro += "- Telefone \n";

if(mensagem.value == "")
erro += "- Mensagem \n";

alert(erro);
</javascript>

Abraços! ;)

[André D. Molin 15]

Tu tem que fazer uma função no JS, e chamar ela quando enviar o form.

Tipo:

 

<input type="submit" name="Submit" value="Enviar" onsubmit="verificaCampos()" />

[Diego Macêdo 6]

Então meu código ficaria assim?

 

java script:

<script language="JavaScript" type="text/javascript">
function ValidaFormulario() {
var erro = "Preencha os campos abaixo que estão vazios:\n";

if(nome.value == "")
erro += "- Nome \n";

if(telefone.value == "")
erro += "- Telefone \n";

if(mensagem.value == "")
erro += "- Mensagem \n";

alert(erro);
}
</javascript>

HTML:

<form name="form1" method="post" action="formmail.php">
<p>Nome:
<input name="nome" type="text" id="nome" size="50" />
</p>
<p>E-mail:
<input name="email" type="text" id="email" size="50" />
</p>
<p>Mensagem:
<textarea name="mensagem" cols="40" rows="6" id="mensagem"></textarea>
</p>
<input type="submit" name="Submit" value="Enviar" onsubmit="ValidaFormulario()" />
</form>

[Diego Macêdo 6]

Esse código não está validando corretamente os campos. Alguém poderia me dar uma luz quanto a isso?

 

Valeu! http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

[klonder 14]

Esse código possui inúmeras falhas. Vale a pena você estudar um pouco mais sobre termos condicionais. Preste atenção também nos campos que estão sendo chamados na função JavaScript (o campo telefone não existe!).

 

Segue um código-modelo:

<script language="JavaScript" type="text/javascript">
function ValidaFormulario() {
var erros = 0;
var erro = "Preencha os campos abaixo que estão vazios:\n";
	if(document.form1.nome.value == "") {
		erro += "- Nome \n";
		erros++;
	}
	
	if(document.form1.email.value == "") {
		erro += "- E-mail \n";
		erros++;
	}
	
	if(document.form1.mensagem.value == "") {
		erro += "- Mensagem \n";
		erros++;
	}
	
	if (erros > 0) {
	var totalErros = "Total de erros encontrados: "+erros; 
	erro+= "\n"+totalErros
	alert(erro);
		return false;
	}
}
</script>

<form name="form1" method="post" action="formmail.php" onsubmit="javascript: return ValidaFormulario()">
<p>Nome:
<input name="nome" type="text" id="nome" size="50" />
</p>
<p>E-mail:
<input name="email" type="text" id="email" size="50" />
</p>
<p>Mensagem:
<textarea name="mensagem" cols="40" rows="6" id="mensagem"></textarea>
</p>
<input type="submit" name="Submit" value="Enviar">
</form>

[Diego Macêdo 6]

Atualmente estou precisando desse script de validação já pra outro form, num era nem mais pra esse antigo.

 

Mas pela sua explicação eu identifiquei os erros e agora já tenho conciência do que estava faltando.

 

Valeu Klonder! http://forum.imasters.com.br/public/style_emoticons/default/clap.gif