Libere esse material sem enrolação!
Cadastre-se ou realize login
Ao continuar, você aceita os Termos de Uso e Política de Privacidade
Libere esse material sem enrolação!
Cadastre-se ou realize login
Ao continuar, você aceita os Termos de Uso e Política de Privacidade
Libere esse material sem enrolação!
Cadastre-se ou realize login
Ao continuar, você aceita os Termos de Uso e Política de Privacidade
Libere esse material sem enrolação!
Cadastre-se ou realize login
Ao continuar, você aceita os Termos de Uso e Política de Privacidade
Libere esse material sem enrolação!
Cadastre-se ou realize login
Ao continuar, você aceita os Termos de Uso e Política de Privacidade
Prévia do material em texto
Universidade Veiga de Almeida
Rafael Oliveira Moreno Filho
Trabalho da Disciplina AVA 2
Rio de Janeiro
2023
Criação de uma interface com o usuário com validação dos dados entrada
Crie uma página HTML com uso de formulário e padronização de estilos, capaz de receber
e analisar os dados digitados pelo usuário e validá-los para posterior envio ao servidor.
A página deverá conter os seguintes campos e restrições:
● Campo nome: que deverá analisar se o nome completo possui no mínimo 15 caracteres.
● Campo e-mail: que deverá analisar se o e-mail possui os símbolos mínimos necessários
e possui pelo menos 10 caracteres.
● Campo data do nascimento: que deverá receber dias, meses e anos válidos, assim como
o envio do foco para o próximo campo, quando estiverem corretos.
● Campo sexo: opções únicas, podendo ser apenas Feminino ou Masculino.
● Campo estado civil: opções únicas, podendo ser apenas Solteiro(a), Casado(a) ou
Outros. Caso a escolha do estado civil tenha sido Solteiro, a data de nascimento deverá
ser analisada e somente validada se a pessoa tiver mais de 15 anos.
● Campo áreas de interesse: opções múltiplas, podendo o usuário escolher entre Análise,
Banco de dados, Desenvolvimento, Engenharia de software e/ou Redes de
computadores.
● Ao final, o botão de envio deve validar todos os campos e apresentar uma mensagem de
dados enviados, caso os dados estejam válidos, ou uma mensagem informando o campo
que não foi validado, com o envio do foco para o respectivo campo.
Resposta :
<!DOCTYPE html>
<html>
<head>
<title>Formulário de Cadastro</title>
<style>
label {
display: block;
margin-top: 10px;
}
button {
margin-top: 20px;
}
</style>
</head>
<body>
<h1>Formulário de Cadastro</h1>
<form onsubmit="return validarFormulario()">
<label>
Nome:
<input type="text" id="nome" required minlength="15">
</label>
<label>
E-mail:
<input type="email" id="email" required minlength="10">
</label>
<label>
Data de Nascimento:
<input type="date" id="dataNascimento" required>
</label>
<label>
Sexo:
<select id="sexo" required>
<option value="">Selecione</option>
<option value="Feminino">Feminino</option>
<option value="Masculino">Masculino</option>
</select>
</label>
<label>
Estado Civil:
<select id="estadoCivil" required>
<option value="">Selecione</option>
<option value="Solteiro">Solteiro(a)</option>
<option value="Casado">Casado(a)</option>
<option value="Outros">Outros</option>
</select>
</label>
<label>
Áreas de Interesse:
<br>
<input type="checkbox" name="interesse" value="Análise">
Análise<br>
<input type="checkbox" name="interesse" value="Banco de dados">
Banco de dados<br>
<input type="checkbox" name="interesse" value="Desenvolvimento">
Desenvolvimento<br>
<input type="checkbox" name="interesse" value="Engenharia de
software"> Engenharia de software<br>
<input type="checkbox" name="interesse" value="Redes de
computadores"> Redes de computadores<br>
</label>
<button type="submit">Enviar</button>
</form>
<script>
function validarFormulario() {
var nome = document.getElementById('nome').value;
var email = document.getElementById('email').value;
var dataNascimento =
document.getElementById('dataNascimento').value;
var sexo = document.getElementById('sexo').value;
var estadoCivil = document.getElementById('estadoCivil').value;
if (nome.length < 15) {
alert('O nome deve ter no mínimo 15 caracteres.');
document.getElementById('nome').focus();
return false;
}
if (email.length < 10 || email.indexOf('@') === -1) {
alert('O e-mail deve ter no mínimo 10 caracteres e conter o
símbolo @.');
document.getElementById('email').focus();
return false;
}
// Validar data de nascimento
if (sexo === "") {
alert('Selecione uma opção para o sexo.');
document.getElementById('sexo').focus();
return false;
}
if (estadoCivil === "") {
alert('Selecione uma opção para o estado civil.');
document.getElementById('estadoCivil').focus();
return false;
}
if (estadoCivil === "Solteiro" && idade < 15) {
alert('A data de nascimento deve ser válida para um solteiro(a)
com mais de 15 anos.');
document.getElementById('dataNascimento').focus();
return false;
}
alert('Dados enviados com sucesso!');
return true;
}
</script>
</body>
</html>
Espero que esteja de acordo com tudo solicitado.Mais conteúdos dessa disciplina
Sistema de Banco de Dados- Projeto De Banco De Dados Modelagem Lógica E Física
- Criação e manipulação de objetos no PostgreSQL
- Consulta com várias tabelas no POSTGRESQL
- 4 - QUESTIONÁRIO
- Cinco caixas de carga (C1, C2, C3, C4, C5) devem ser carregadas em sequência em uma aeronave. Qual é a ordem correta de carregamento? R E STR I Ç ÕE S
- Dashboards são ferramentas importantes em Business Intelligence porque: 1. Fornecem uma visão detalhada dos dados em cubos multidimensionais. 2. Possi
- No processamento paralelo, qual tipo de arquitetura utiliza vários processadores para executar a mesma operação em diferentes partes de um conjunto...
- Durante uma partida de tênis crucial, uma tenista de alto rendimento começa a cometer erros não característicos. Ela acerta bolas fora da quadra, erra
- Considere o sistema de banco de dados MongoDB, que possui uma base de dados chamada Produtos. Marque a alternativa que corretamente realiza a inse...
- Sobre bancos de dados SQL e NoSQL, analise as afirmativas a seguir e assinale-as com V (verdadeiro) ou F (falso): ( ) O NoSQL nem sempre é a mel...
- Em relação às características de banco de dados NoSQL, analise as alternativas a seguir e marque a opção verdadeira: Grupo de escolhas da pergunta Tod
- O pensamento visual em comunicação de dados é importante, entre outras coisas porque: a. Substitui completamente os números por imagens, sem perder si
- Qual é o principal propósito do storytelling de dados na comunicação de informações complexas? a. Transformar dados técnicos em narrativas que despert
- A arquitetura de processamento de dados distribuída exige uma série de componentes e tecnologias para garantir que os dados sejam processados de ma...
- s componentes do Spark (2.0 ou superior) têm como objetivo facilitar o desenvolvimento de projetos com finalidades específicas. Nesse sentido, sele...
- create create 4 create create 7 8 9 10 11 12 13 14 15 16 17 18 19 20 O feedback negativo, quando na devolutiva de uma avaliação de desempenho, deve...
- Qual das seguintes afirmações melhor descreve a diferença entre dados estruturados e não estruturados? Alternativas: Dados estruturados e não estrutur
- Atividade Sistemas de Informação e Conhecimento
- Avaliação Estudos Disciplinares IV (2/2019) - Redes de Computadores (UNIP)