Data de Nascimento DD/MM/YYYY Menor que a data atual, alguém pode me ensinar como validar data, por favor!
Solucionado (ver solução)
Solucionado
(ver solução)
23
respostas
respostas
Como validar data de nascimento em Formulário JavaScript
Oi Rodrigo tudo bem?
Dá uma olhada nesse código que fiz:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Data de Nascimento</title>
<script>
function validardataDeNascimento(data){
dataAtual= new Date();
data=new Date(data);
if (data<dataAtual){
console.log("Data Válida");
return true;
} else {
console.log("Data Inválida");
return false;
}
}
</script>
</head>
<body>
<input onchange="validardataDeNascimento(this.value);" id="dataDeNascimento" type="date">
</body>
</html>Espero ter ajudado!!!
Eu criei uma arquivo javascript, e estou a 4 horas tentando fazer ele validar algumas coisas mas não consigo, sabe o que pode ser ? pois eu conferi e não tem nada errado, eu sou iniciante em web ainda, tira uma dúvida por favor, para que serve estas tag:
meta name="viewport" content="width=device-width, initial-scale=1.0">
meta http-equiv="X-UA-Compatible" content="ie=edge">
meta name="viewport" content="width=device-width, initial-scale=1.0"> serve para configurar a viewport (área visível da tela), no contente diz que a largura é a largura do dispositivo (computador ou celular) e qua a escala inicial é 1 (que é o normal).
E no segundo esta meta é exclusiva para Internet Explorer (introduzido no IE8), ela pode configurar a página para ser renderizada como em outra versão do Internet Explorer. Como diz ie=edge está dizendo para o Internet Explorer rodar na última versão.
São coisas padrões e o visual code que gerou pra mim automaticamente, nem uso, mas deixo lá pq vai que precisa rsrsrs.
Coloca seu código aqui que eu analiso pra vc. Você pode conferir no console do navegador apertando F12 para ver onde está o erro.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title> Formulário </title>
<link rel="stylesheet" type="text/css" href="style/style.css"/>
<script type="text/javascript" src="script/javascript.js"></script>
</head>
<body>
<h1>Formulário</h1>
<form name="formcadastro" method="post" action="nenhumaPagina" onsubmit="return validacao()">
<table>
<tr>
<td class="celula"> Matrícula: </td>
<td>
<input type="text" name="matricula" size=25 placeholder="Digite sua matrícula!" />
</td>
</tr>
<tr>
<td class="celula"> Nome Completo: </td>
<td>
<input type="text" size=50 name="nome" required placeholder="Digite seu nome!" />
</td>
</tr>
<tr>
<td class="celula"> Sexo: </td>
<td>
Masculino: <input type="radio" name="sexo" checked="checked" value="Masculino" />
Feminino: <input type="radio" name="sexo" value="Feminino" />
</td>
</tr>
<tr>
<td class="celula"> Data de Nascimento: </td>
<td>
<input type="date" required name="dataNascimento" />
</td>
</tr>
<tr>
<td class="celula"> Curso: </td>
<td>
<select name="curso">
<option value="EG"> Engenharia da Computação </option>
<option value="CI"> Ciências da Computação </option>
<option value="ADS"> Análise e Desenvolvimento de Software</option>
</select>
</td>
</tr>
<tr>
<td class="celula"> Não Cursaria: </td>
<td>
<select name="naoCursaria">
<option value="CI"> Ciências da Computação</option>
<option value="EG"> Engenharia da Computação</option>
<option value="ADS"> Análise e Desenvolvimento de Software</option>
<option value="LE">Letras </option>
<option value="FI">Física </option>
<option value="HI">História</option>
</select>
</td>
</tr>
<tr>
<td class="celula"> Email: </td>
<td>
<input type="text" size=50 name="senha" required placeholder="Digite seu email!" />
</td>
</tr>
<tr>
<td class="celula">Senha: </td>
<td>
<input type="password" size="35" name="senha" required placeholder="Digite sua senha!" />
</td>
</tr>
<tr>
<td class="celula">Confirma Senha: </td>
<td>
<input type="password" size=35 name="senha" required placeholder="Confirme sua senha, porfavor!" />
</td>
</tr>
<tr>
<td class="celula">Motivação do curso: </td>
<td>
<textarea type="text" size=50 rows="5" cols="52" name="motivacao"> </textarea>
</td>
</tr>
<tr>
<td class="celula2">
<input type="submit" value="Enviar" name="cadastrar" />
</td>
</tr>
</table>
</form>
<code class="code">Copyright@ - Rodrigo Barbosa</code>
</body>
</html>To mais de 4 horas e não consigo descobrir porque minha validações não executa nos erros mano
function validacao(){
var formulario = document.forms["formcadastro"]
var nome = formulario.name.value;
var matricula = formulario.matricula.value;
var erro = false;
if(matricula > 20){
alert("A matrícula possui 20 digitos, verifique sua matrícula por favor!");
formulario.matricula.
erro = true;
}
if(nome.length < 4){
alert("Digite pelo menos 3 caracteres!");
erro = true;
}
if(erro){
return false;
} else{
return true;
}
}
Eu dei uma consertada em algumas coisas dá uma olhada. Ainda tem alguns erros, vou jantar e depois volto a mecher no código.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title> Formulário </title>
<link rel="stylesheet" type="text/css" href="style/style.css" />
<script type="text/javascript" srcid="script/javascript.js">
function validacao() {
event.preventDefault();
var formulario = document.forms[0];
var nome = document.getElementsByName("nome")[0].value;
var matricula = document.getElementsByName("matricula")[0].value;
var erro = false;
if (matricula.length > 20) {
alert("A matrícula possui 20 digitos, verifique sua matrícula por favor!");
erro = true;
}
if (nome.length < 4) {
alert("Digite pelo menos 3 caracteres!");
erro = true;
}
if (erro) {
return false;
alert("Cadastro feito com sucesso!!!");
formulario.submit();
} else {
return false;
}
}
</script>
</head>
<body>
<h1>Formulário</h1>
<form name="formcadastro" method="post" action="nenhumaPagina" onsubmit="return validacao()">
<table>
<tr>
<td class="celula"> Matrícula: </td>
<td>
<input type="text" name="matricula" size=25 placeholder="Digite sua matrícula!" />
</td>
</tr>
<tr>
<td class="celula"> Nome Completo: </td>
<td>
<input type="text" size=50 name="nome" required placeholder="Digite seu nome!" />
</td>
</tr>
<tr>
<td class="celula"> Sexo: </td>
<td>
Masculino: <input type="radio" name="sexo" checked="checked" value="Masculino" />
Feminino: <input type="radio" name="sexo" value="Feminino" />
</td>
</tr>
<tr>
<td class="celula"> Data de Nascimento: </td>
<td>
<input type="date" required name="dataNascimento" />
</td>
</tr>
<tr>
<td class="celula"> Curso: </td>
<td>
<select name="curso">
<option value="EG"> Engenharia da Computação </option>
<option value="CI"> Ciências da Computação </option>
<option value="ADS"> Análise e Desenvolvimento de Software</option>
</select>
</td>
</tr>
<tr>
<td class="celula"> Não Cursaria: </td>
<td>
<select name="naoCursaria">
<option value="CI"> Ciências da Computação</option>
<option value="EG"> Engenharia da Computação</option>
<option value="ADS"> Análise e Desenvolvimento de Software</option>
<option value="LE">Letras </option>
<option value="FI">Física </option>
<option value="HI">História</option>
</select>
</td>
</tr>
<tr>
<td class="celula"> Email: </td>
<td>
<input type="text" size=50 name="senha" required placeholder="Digite seu email!" />
</td>
</tr>
<tr>
<td class="celula">Senha: </td>
<td>
<input type="password" size="35" name="senha" required placeholder="Digite sua senha!" />
</td>
</tr>
<tr>
<td class="celula">Confirma Senha: </td>
<td>
<input type="password" size=35 name="senha" required placeholder="Confirme sua senha, porfavor!" />
</td>
</tr>
<tr>
<td class="celula">Motivação do curso: </td>
<td>
<textarea type="text" size=50 rows="5" cols="52" name="motivacao"> </textarea>
</td>
</tr>
<tr>
<td class="celula2">
<input type="submit" value="Enviar" name="cadastrar" />
</td>
</tr>
</table>
</form>
<code class="code">Copyright@ - Rodrigo Barbosa</code>
</body>
</html>porque eu preciso utilizar a função validar dentro do html ? se eu tentar usar igual estava é errado ?
Só coloquei dentro do html para facilitar meu copiar e colar rsrsrs. Tanto faz, as duas estão certas porque funcionam.
e dentro da tag script eu coloquei srcid="script/javascript.js" ao invés de src="script/javascript.js" só para ele não tentar baixar um arquivo que não existe no meu pc.
srcid é uma propriedade que não existe, o html aceita a gente inventar propriedades, poderia ter chamado de qualquer coisa como arquivo, ou sei lá. Porque não queria que a página tentasse carregar um arquivo que não existe.
Depois pode separar em 2 arquivos com antes.
Vou continuar consertando seu código.
acabei de tentar executar este código, continua não funcionado minhas validações, porque será ? o professor me obrigou a eu criar arquivos seperado, html, css e java script, acho que ele vai tirar nota se eu deixar o java script no html, ele quer que apenas faço chamada da função no html
O código ainda não está pronto, só mostrei para você ver como tá indo. Sabe como são os professores, siga a regra deles.
ah tá beleza, obrigado pela ajuda, eu não consigo entender porque meu javascript não funciona, eu fiz outro exercício e utilizei a mesma estrutura e funcionou, mas agora não quer funcionar
Tem que sempre ver o erro que dá no console (F12). Tentar adivinhar olhando pelo código é como procurar uma agulha no palheiro.
Se você usar o Visual Code como editor de texto e salvar o arquivo na extensão correta ele colore o código e sublinha de vermelho os erros.
Melhor editor da atualidade sem sombra de dúvidas.
Pior que estou usando o Visual Code, o problema é que comecei utilizar ele ontem, estou aprendendo a mexer nele também, mas no console aparece um erro que não existe no meu visual code, não sei porque.
Qual erro?
na verdade não estou achando erro nenhum mas, simplesmente meu arquivo javascript que quero usar para validar não executa no html, não sei onde procura mais para resolver isso
Executa o codigo em modo debugger.
Abre o F12 , vai em Sources e coloca pontos de parada para o código parar. Usa o Chrome pra isso. E vai apertando F10 para avançar linha a linha.
Se não souber como fazer essa aula ensina (já que tem pouco tempo tenta ler a transcrição do vídeo que é mais rapido) https://cursos.alura.com.br/course/chrome-devtools/task/21985
vou tentar fazer isso aqui, obrigado! mas to quase desistindo desse código kkkkkkkkk
Aguenta firme cara, persistência e planejamento são as chaves para o sucesso!!! Rsrsrs
solução!
só ver este vídeo conseguir achar o erro kkkkkkkk fui só eu tirar o required do meu input que funcionou uma das validação, vou tentar as outras, obrigado pela ajuda e paciência
Aqui está o código mudei tanto HTML como Javascript.
Dá uma boa testada, eu fiquei uns 15 minutos testando mas vai que falta algo né. Não me responsabilizo por nada rsrsrs.
O ideal é você ver como fiz e reescrever o código para aprender.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title> Formulário </title>
<link rel="stylesheet" type="text/css" href="style/style.css" />
<script type="text/javascript" src="script/javascript.js"></script>
</head>
<body>
<h1>Formulário</h1>
<form name="formcadastro" method="post" action="nenhumaPagina" onsubmit="return validacao()">
<table>
<tr>
<td class="celula"> Matrícula: </td>
<td>
<input type="text" name="matricula" size=25 placeholder="Digite sua matrícula!" />
</td>
</tr>
<tr>
<td class="celula"> Nome Completo: </td>
<td>
<input type="text" size=50 name="nome" required placeholder="Digite seu nome!" />
</td>
</tr>
<tr>
<td class="celula"> Sexo: </td>
<td>
Masculino: <input type="radio" name="sexo" checked="checked" value="Masculino" />
Feminino: <input type="radio" name="sexo" value="Feminino" />
</td>
</tr>
<tr>
<td class="celula"> Data de Nascimento: </td>
<td>
<input type="date" required name="dataNascimento" />
</td>
</tr>
<tr>
<td class="celula"> Curso: </td>
<td>
<select name="curso">
<option value="EG"> Engenharia da Computação </option>
<option value="CI"> Ciências da Computação </option>
<option value="ADS"> Análise e Desenvolvimento de Software</option>
</select>
</td>
</tr>
<tr>
<td class="celula"> Não Cursaria: </td>
<td>
<select name="naoCursaria">
<option value="CI"> Ciências da Computação</option>
<option value="EG"> Engenharia da Computação</option>
<option value="ADS"> Análise e Desenvolvimento de Software</option>
<option value="LE">Letras </option>
<option value="FI">Física </option>
<option value="HI">História</option>
</select>
</td>
</tr>
<tr>
<td class="celula"> Email: </td>
<td>
<input type="email" size=50 name="email" required placeholder="Digite seu email!" />
</td>
</tr>
<tr>
<td class="celula">Senha: </td>
<td>
<input type="password" size="35" name="senha1" required placeholder="Digite sua senha!" />
</td>
</tr>
<tr>
<td class="celula">Confirma Senha: </td>
<td>
<input type="password" size=35 name="senha2" required placeholder="Confirme sua senha, porfavor!" />
</td>
</tr>
<tr>
<td class="celula">Motivação do curso: </td>
<td>
<textarea type="text" size=50 rows="5" cols="52" name="motivacao"></textarea>
</td>
</tr>
<tr>
<td class="celula2">
<input type="submit" value="Enviar" name="cadastrar" />
</td>
</tr>
</table>
</form>
<code class="code">Copyright@ - Rodrigo Barbosa</code>
</body>
</html> function validacao() {
event.preventDefault();
var formulario = document.forms[0];
var nome = document.getElementsByName("nome")[0].value;
var matricula = document.getElementsByName("matricula")[0].value;
var email = document.getElementsByName("email")[0].value;
var data = document.getElementsByName("dataNascimento")[0].value;
var senha1 = document.getElementsByName("senha1")[0].value;
var senha2 = document.getElementsByName("senha2")[0].value;
var erro = false;
dataAtual = new Date();
data = new Date(data);
if (data > dataAtual) {
alert("Data inválida, você não pode ter nascido hoje ou no futuro!");
erro = true;
}
if (email.indexOf("@") < 0) {
alert("O e-mail precisa conter pelo menos um @!");
erro = true;
}
if (email.indexOf(".") < 0) {
alert("O e-mail precisa conter pelo menos um .!");
erro = true;
}
if (email.indexOf("@") == 0) {
alert("O e-mail não pode começar com @!");
erro = true;
}
//raiz quadrada de um número elevado a 2 nos dá o número sempre positivo, mais conhecido como módulo. Eu sei que eles tão juntos porque a distância dos caracteres é 1. Não funciona se ter mais de um @. Ou se @ estiver no começo. Porém o HTML5 segura a validação de e-mail.
if (Math.sqrt(Math.pow(email.indexOf("@") - email.indexOf("."), 2)) == 1) {
alert("O e-mail não pode ter . junto de @ !");
erro = true;
}
if (email.indexOf("@") == email.length) {
alert("O e-mail não pode terminar com @!");
erro = true;
}
if (senha1 != senha2) {
alert("As senhas não conferem!");
erro = true;
}
if (senha1.length < 6 || senha1.length > 8) {
alert("As senhas tem que ter no mínimo 6 caracteres e no máximo 8 caracteres");
erro = true;
}
var boolLetraMaiuscula = false;
var boolLetraMinuscula = false;
var boolNumero = false;
var boolEspecial = false;
for (k = 0; k <= senha1.length; k++) {
//Tabela ASCII Decimal
if (senha1.charCodeAt(k) >= 33 && senha1.charCodeAt(k) <= 47) {
boolEspecial = true;
}
if (senha1.charCodeAt(k) >= 48 && senha1.charCodeAt(k) <= 57) {
boolNumero = true;
}
if (senha1.charCodeAt(k) >= 58 && senha1.charCodeAt(k) <= 64) {
boolEspecial = true;
}
if (senha1.charCodeAt(k) >= 65 && senha1.charCodeAt(k) <= 90) {
boolLetraMaiuscula = true;
}
if (senha1.charCodeAt(k) >= 91 && senha1.charCodeAt(k) <= 96) {
boolEspecial = true;
}
if (senha1.charCodeAt(k) >= 97 && senha1.charCodeAt(k) <= 122) {
boolLetraMinuscula = true;
}
if (senha1.charCodeAt(k) >= 123) {
boolEspecial = true;
}
}
if (boolLetraMaiuscula == false) {
alert("As senhas tem que ter no mínimo 1 letra maiúscula!");
erro = true;
}
if (boolLetraMinuscula == false) {
alert("As senhas tem que ter no mínimo 1 letra minúscula!");
erro = true;
}
if (boolNumero == false) {
alert("As senhas tem que ter no mínimo 1 caracter númerico!");
erro = true;
}
if (boolEspecial == false) {
alert("As senhas tem que ter no mínimo 1 caracter especial!");
erro = true;
}
if (matricula.length != 20) {
alert("A matrícula possui 20 digitos, verifique sua matrícula por favor!");
erro = true;
}
if (nome.length < 4) {
alert("Digite pelo menos 3 caracteres no nome!");
erro = true;
}
if (erro) {
return false;
} else {
alert("Cadastro feito com sucesso!!!");
formulario.submit();
return true;
}
}