Validação de Formulário com Javascript.

Marcelo Paiva de Almeida · Agosto 15, 2018

Prezados Boa tarde,

Necessito da ajuda de vocês, pois sou iniciante em programação e principalmente em javascript e estou fazer um código para validar um formulário o qual eu só estou conseguindo somente enviar a mensagem de alerta para um campo, mas os outros não exibem a mensagem e agradeço a todos que puderem colaborar.

Código HTML:

<!doctype html>
<html>
	<head>
			<title> Central de Relacionamento </title>
			<meta charset="utf-8">
			<link rel="stylesheet" type="text/css" href="estilo.css">
			<script type="text/javascript" src="validar.js">
			</script>
	</head>
	<body>		
			<form name="form1" action="enviar.php" method="post">
					<label> Digite o seu nome</label>
					<input type="text" name="nome" placeholder="Digite seu nome"/> 
					<label> E-mail</label>
					<input type="text" name="email" placeholder="Digite seu E-mail" />
					<label> Telefone </label> 
					<input type="text" name="telefone" placeholder="Digite seu telefone" /> 
					<label>Usuário</label>
					<select name="usuario" id="usuario">
					 	<option value="Aluno"> Aluno </option>
					 	<option value="Aposentado"> Aposentado </option>
					 	<option value="diretor"> Diretor</option>
					 	<option value="terceirizado"> Funcionario Terceirizado</option>
					 	<option value="pais"> Pais e Responsáveis</option>
					 	<option value="professor"> Professor </option>
					 	<option value="Servidor_Seeduc"> Servidor Seeduc </option>
					</select>
					<textarea name="descricao" placeholder="digite seu texto"></textarea>
					<button type="button" onclick="return validar()"> Enviar</button>
			</form>				
			
	</body>		
</html>

Código Javascript:

nction validar(){

	if(document.form1.nome.value == "")

	{
		alert("Preencha o nome corretamente!");
		document.form1.nome.focus();
		return false;
	}	

	if(document.form1.email.value == ""){
		alert("Preencha o seu e-mail corretamente");
		document.form1.email.focus();
		return false;
	}

	if(document.form1.telefone.value == "")

	{
		alert("Preencha o nome corretamente!");
		document.form1.telefone.focus();
		return false;
	}	

	if(document.form1.descricao.value == ""){
		alert("Preencha o seu e-mail corretamente");
		document.form1.descricao.focus();
		return false;
	}
	
	
}

Eu agradeço a todos que puderem me ajudar.

Atenciosamente,

Marcelo Paiva de Almeida

wanderval · Agosto 18, 2018

Aparentemente sua lógica está correta exceto por alguns detalhes

1 - seu código javascript na validação de telefone você está exibindo a mensagem errada

alert("Preencha o nome corretamente!");

2 - a mensagem tb está errada na descrição

alert("Preencha o seu e-mail corretamente");

3 - eu aconselho você colocar os scrips para serem carregados no final do body

link do meu teste usando o sua implementação: https://jsbin.com/nemoxifibu/edit?html,css,js,output

Omar~ · Agosto 19, 2018

@Marcelo Paiva de Almeida Algumas dicas para você já que:

Em 15/08/2018 at 18:00, Marcelo Paiva de Almeida disse:

iniciante em programação e principalmente em javascript

Primeiro placeholder não se aplica em textarea

Segundo e mais importante. Nunca se deve confiar no javascript para validar fomulários, qualquer pessoa pode editar-lo em seu browser e fazer o javascript executar o que ele quiser, ou mesmo pode desabilita-lo. Não que não possa usa-lo com checagem assim como deseja, mas sempre quem deve confirmar os campos digitados por uma pessoa é o servidor no seu caso aí no arquivo PHP e não a própria máquina do usuário.

A sua questão.

O jeito mais prático para verificar os campos é pegando os valores dos elementos por meio de identificação de cada input

Veja um exemplo (obs.: Não usei o alerta porque acho isso grotesco demais)

Spoiler


<div id="mostra_resultado"></div>

<form method="post" onsubmit="return myFnc()">
    <input type="text" id="validar_1" name="txt_a" placeholder="Digite alguma coisa"/>
    <input type="text" id="validar_2" name="txt_b" placeholder="Digite alguma coisa"/>
    <textarea id="validar_3" name="txt_c"></textarea>
    <button type="submit">Validar</button>
</form>

<script>
    function myFnc() {
        var resultado = document.getElementById('mostra_resultado');
        var txtA = document.getElementById('validar_1').value;
        var txtB = document.getElementById('validar_2').value;
        var txtC = document.getElementById('validar_3').value;

        if (!txtA) {
            resultado.innerText = 'digite alguma coisa no primeiro campo';
        } else if (!txtB) {
            resultado.innerText = 'digite alguma coisa no segundo campo';
        } else if (!txtC) {
            resultado.innerText = 'digite alguma coisa no terceiro campo';
        } else {
            resultado.innerText = 'todos os campos foram preenchidos';
        }
        return false;
    }
</script>