Skip to content

Instantly share code, notes, and snippets.

@crystianwendel

crystianwendel/index.html

Created October 11, 2013 12:43
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save crystianwendel/6934003 to your computer and use it in GitHub Desktop.
Save crystianwendel/6934003 to your computer and use it in GitHub Desktop.
Download ZIP
Formulário com validação simples
Raw
index.html
<html>
<head>
<meta charset="UTF-8">
<title>Titulo</title>
<style rel="stylesheet" type="text/css">
input.invalid {
border: 2px solid red;
}
</style>
</head>
<body>
<form action="http://www.headfirstlabs.com/contest.php" method="POST"
onsubmit="return valida();">
<p>
Primeiro nome: <input id="firstname" type="text" name="firstname"/>
</p>
<p>
Último nome: <input id="lastname" type="text" name="lastname"/>
</p>
<p>
Endereço: <input id="address" type="text" name="lastname"/>
</p>
<p>
Email: <input id="email" type="text" name="lastname"/>
</p>
<p>
<input type="submit" value="Enviar"/>
</p>
</form>
<script language="javascript">
function valida() {
var valido = true;
if (document.getElementById('firstname').value == '') {
document.getElementById('firstname').className = "invalid";
valido = false;
} else {
document.getElementById('firstname').className = "";
}
if (document.getElementById('lastname').value == '') {
document.getElementById('lastname').className = "invalid";
valido = false;
} else {
document.getElementById('lastname').className = "";
}
if (document.getElementById('address').value == '') {
document.getElementById('address').className = "invalid";
valido = false;
} else {
document.getElementById('address').className = "";
}
if (document.getElementById('email').value == '') {
document.getElementById('email').className = "invalid";
valido = false;
} else {
document.getElementById('email').className = "";
}
return valido;
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment