Olá pessoal, como estou fazendo validação de formulário (simples), resolvi postar o básico pra vocês também terem uma idéia de como se faz isso.
Vamos lá, abaixo esta o código detalhado, e no fim dele os arquivos para downloads.
<html>
<head>
<title>Validando formularios</title>
<script language=”javascript” type=”text/javascript”>
function validaForm()
{
var d=document.formulario; //Vai pegar o formulario e adicionar em uma variavél
// Formulario é o nome que dei ao meu form
/*Verifica se o campo texto esta vazio*/
if (d.texto1.value==”" || d.texto1.value==null)
{
alert (“Por favor preencha o campo” + d.texto1.name); //d.text.name mostra o nome que voce deu na janela de alerta
d.texto1.focus(); //volta ao campo que está errado
return false; //retorna falso e continua na página
}
/*Verifica se o campo texto tem mais de 4 caracter*/
if (d.texto1.value.length <4) //verifica se tem mais de 4 caracter
{
alert (“Insira um nome válido”);
d.texto1.focus(); //volta ao campo que está errado
return false; //retorna falso e continua na página
}
/*Verifica se é string ou numero*/
if (!isNaN(d.texto1.value))
{
alert (“Insira somente letras”);
d.texto1.focus(); //volta ao campo que está errado
return false; //retorna falso e continua na página
}
/*Validando Radio*/
if (!(d.Radio1.checked || d.Radio2.checked)) //Verifica se o radio ta ativado
{
alert(“Selecione 1 Radio”);
d.Radio1.focus();
return false;
}
/*Validando select*/
if (d.Select1.value == “”)
{
alert(“Escolha uma opção”);
d.Select1.focus();
return false;
}
/*Validando checkbox*/
if (d.Check1.checked == false && d.Check2.checked == false && d.Check3.checked == false ) {
alert(“Favor escolher uma opção”);
d.Check1.focus();
return false;
}
return true;
}
</script>
</head>
<body>
<h2>Validando Formulário</h2>
<form name=”formulario” method=”post” action=”enviado.html” onsubmit=”return validaForm();”>
<!– com onsubmit=”return validaForm();” ele só enviara os dados qnd for true –>
<p>
Text <input type=”text” name=”texto1″ value=”" />
</p>
<p>
Radio 1 <input type=”radio” id=”Radio1″ name=”testeR” value=”R1″ />
Radio 2 <input type=”radio” id=”Radio2″ name=”testeR” value=”R2″ />
</p>
<p>
Select
<br />
<select name=”Select1″>
<option></option>
<option>Opcao 1 </option>
<option>Opcao 2</option>
<option>Opcao 3 </option>
<option>Opcao 4</option>
</select>
</p>
CheckBox
<p>
Check 1<input type=”checkbox” name=”Check1″ />
<br />
Check 2<input type=”checkbox” name=”Check2″ />
<br />
Check 3<input type=”checkbox” name=”Check3″ />
<br />
</p>
<input type=”submit” name=”submit” />
</form>
</body>
</html>
