Skip to content

Instantly share code, notes, and snippets.

@valdiney

valdiney/gist:5244823

Last active December 15, 2015 10:19
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 valdiney/5244823 to your computer and use it in GitHub Desktop.
Save valdiney/5244823 to your computer and use it in GitHub Desktop.
Download ZIP
Nestes exemplos nós temos uma página html contendo toda a marcação para formar um formulário e seus elementos e logo a baixo um Script de javascript para validação simples dos dados recebidos pelos campos.
Raw
gistfile1.html
<!doctype html>
<!--
Autor: Valdiney França
Site: valdiney.org
-->
<html>
<head>
<script src="js/jquery-1.6.4.min.js"></script>
<link rel="stylesheet" href="css/style_areadetrabalho.css"/>
<title>BD SCHOOL</title>
</head>
<body>
<?php
include"menu_header.php";
?>
<div id="apresentar_dados">
<form id="estudantes" method="post" action="#">
<table id="tabela_estudantes" border="0">
<tr>
<td><label for="id_nome">Nome completo:</label></td>
<td><input type="text" id="id_nome" name="nome"></td>
</tr>
<tr>
<td><label for="id_idade">Idade:</label></td>
<td><input type="text" id="id_idade" name="idade"></td>
</tr>
<tr>
<td><label for="masculino">Masculino:</label></td>
<td><input type="radio" name="sexo" id="masculino" value="masculino" checked="checked"/></td>
</tr>
<tr>
<td><label for="feminino">Feminino:</label></td>
<td><input type="radio" name="sexo" id="feminino" value="feminino"/></td>
</tr>
<tr>
<td><label for="id_nacionalidade">Nacionalidade:</label></td>
<td><input type="text" id="id_nacionalidade" name="nacionalidade"></td>
</tr>
<tr>
<td><label for="id_estadonatal">Estado natal:</label></td>
<td><input type="text" id="id_estadonatal" name="estado_natal"></td>
</tr>
<tr>
<td><label for="id_cidadenatal">Cidade natal:</label></td>
<td><input type="text" id="id_cidadenatal" name="cidade_natal"></td>
</tr>
<tr>
<td><label for="id_enderecoatual">Endereço atual:</label></td>
<td><input type="text" id="id_enderecoatual" name="endereco_atual"></td>
</tr>
<tr>
<td><label for="id_rg">RG:</label></td>
<td><input type="text" id="id_rg" name="rg"></td>
</tr>
<tr>
<td><label for="id_cpf">CPF:</label></td>
<td><input type="text" id="id_cpf" name="cpf"></td>
</tr>
<tr>
<td><label for="id_tell">Tell:</label></td>
<td><input type="text" id="id_tell" name="tell"></td>
</tr>
<tr>
<td><label for="id_cell">Cell:</label></td>
<td><input type="text" id="id_cell" name="cell"></td>
</tr>
<tr>
<td><label for="id_nomemae">Nome da mãe:</label></td>
<td><input type="text" id="id_nomemae" name="nome_mae"></td>
</tr>
<tr>
<td><label for="id_nomepai">Nome do pai:</label></td>
<td><input type="text" id="id_nomepai" name="nome_pai"></td>
</tr>
<tr>
<td><label for="id_serie">Serie:</label></td>
<td><input type="text" id="id_serie" name="serie"></td>
</tr>
<tr><!--linha-->
<td><hr></td>
<td><hr></td>
<td><hr></td>
</tr>
<tr>
<td><button type="submit" id="gravar_dados">Cadastrar</button></td>
</tr>
</table>
</table>
</form>
</div><!--end apresentar dados-->
</body>
</html>
Raw
gistfile2.js
/*
Autor: Valdiney França
Site: valdiney.org
Script de validação simples do formulario acima
JavaScript com jQuery
*/
$(document).ready(function(){
$("#gravar_dados").click(function(){
var nome = $("#id_nome").val();
var idade = $("#id_idade").val();
var nacionalidade = $("#id_nacionalidade").val();
var estado_natal = $("#id_estadonatal").val();
var cidade_natal = $("#id_cidadenatal").val();
var endereco_atual = $("#id_enderecoatual").val();
var registro_geral= $("#id_rg").val();
var cpf= $("#id_cpf").val();
var tell = $("#id_tell").val();
var cell = $("#id_cell").val();
var nome_mae = $("#id_nomemae").val();
var nome_pai = $("#id_nomepai").val();
var serie = $("#id_serie").val();
/*Campos de entrada*/
var vetor_corErros =['background-color','#ff9999',/*cor padrão*/'#f6f6e8'];
/*Vetor corErros armazena em suas posições valores que serão usados nas condicionais*/
if(nome == '' || nome.length<5){
$("#id_nome").css(vetor_corErros[0],vetor_corErros[1]);
return false;
}
else if(idade == '' || idade<2){
$("#id_idade").css(vetor_corErros[0],vetor_corErros[1]);
return false;
}
else if(nacionalidade.length<3 || nacionalidade == ''){
$("#id_nacionalidade").css(vetor_corErros[0],vetor_corErros[1]);
return false;
}
else if(estado_natal.length<3 || estado_natal == ''){
$("#id_estadonatal").css(vetor_corErros[0],vetor_corErros[1]);
return false;
}
else if(cidade_natal.length<3 || cidade_natal == ''){
$("#id_cidadenatal").css(vetor_corErros[0],vetor_corErros[1]);
return false;
}
else if(endereco_atual.length<5 || endereco_atual == ''){
$("#id_enderecoatual").css(vetor_corErros[0],vetor_corErros[1]);
return false;
}
else if(registro_geral.length<10 || registro_geral.length>11 || registro_geral == ''){
$("#id_rg").css(vetor_corErros[0],vetor_corErros[1]);
return false;
}
else if(cpf.length<11 || cpf.length>11 || cpf == ''){
$("#id_cpf").css(vetor_corErros[0],vetor_corErros[1]);
return false;
}
else if(tell.length<8 || tell.length>8 || tell == ''){
$("#id_tell").css(vetor_corErros[0],vetor_corErros[1]);
return false;
}
else if(cell.length<8 || cell.length<8 || cell == ''){
$("#id_cell").css(vetor_corErros[0],vetor_corErros[1]);
return false;
}
if(nome_mae == '' || nome_mae.length<5){
$("#id_nomemae").css(vetor_corErros[0],vetor_corErros[1]);
return false;
}
if(nome_pai == '' || nome_pai.length<5){
$("#id_nomepai").css(vetor_corErros[0],vetor_corErros[1]);
return false;
}
if(serie == ''){
$("#id_serie").css(vetor_corErros[0],vetor_corErros[1]);
return false;
}
else{
return true;
}
});//end click
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment