Ir ao conteúdo
  • Cadastre-se
Ana Grossi

Java RESOLVIDO Exibir confirm do JavaScript antes de cadastrar

Recommended Posts

Olá! Estou tendo uma dificuldade no desenvolvimento de um sistema e preciso da ajuda de vocês. É o seguinte: Preciso realizar o cadastro de um EPI no sistema, e eu gostaria que, quando o usuário clicasse em "Cadastrar", caso a data de validade do EPI fosse menor que a data atual, o sistema emitisse uma mensagem "A data de validade do EPI está expirada. Deseja cadastrar assim mesmo?". Se ele escolhesse "Sim", o cadastro seria feito. Se escolhesse "Não", permaneceria no formulário.
Segue o código que fiz até agora. A confirm até aparece, mas se clicar em "Não" (ou cancelar), ele envia o formulário do mesmo jeito. No caso, é a função "comparar(id)", a outra é só pra validar a data. Obrigada :)
 

<html>
	<head>
		<title>Cadastro de EPI</title>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
		<link rel="stylesheet" href="assets/css/main.css" />
		<noscript><link rel="stylesheet" href="assets/css/noscript.css" /></noscript>
                <script>
                function validateDate(id) {
                   var RegExPattern = /^((((0?[1-9]|[12]\d|3[01])[\.\-\/](0?[13578]|1[02])[\.\-\/]((1[6-9]|[2-9]\d)?\d{2}))|((0?[1-9]|[12]\d|30)[\.\-\/](0?[13456789]|1[012])[\.\-\/]((1[6-9]|[2-9]\d)?\d{2}))|((0?[1-9]|1\d|2[0-8])[\.\-\/]0?2[\.\-\/]((1[6-9]|[2-9]\d)?\d{2}))|(29[\.\-\/]0?2[\.\-\/]((1[6-9]|[2-9]\d)?(0[48]|[2468][048]|[13579][26])|((16|[2468][048]|[3579][26])00)|00)))|(((0[1-9]|[12]\d|3[01])(0[13578]|1[02])((1[6-9]|[2-9]\d)?\d{2}))|((0[1-9]|[12]\d|30)(0[13456789]|1[012])((1[6-9]|[2-9]\d)?\d{2}))|((0[1-9]|1\d|2[0-8])02((1[6-9]|[2-9]\d)?\d{2}))|(2902((1[6-9]|[2-9]\d)?(0[48]|[2468][048]|[13579][26])|((16|[2468][048]|[3579][26])00)|00))))$/;

                   if (!((id.value.match(RegExPattern)) && (id.value!=''))) {
                      alert('Por favor, verifique a data digitada.');
                          id.focus();
                   }
                   
                }
                </script>
                <script>
                function comparar(id){
                    var data = id.value;

                    var objDate = new Date();
                    objDate.setYear(data.split("/")[2]);
                    objDate.setMonth(data.split("/")[1]  - 1);//- 1 porque em js é de 0 a 11 os meses
                    objDate.setDate(data.split("/")[0]);
                    
                    
                    if(objDate.getTime() < new Date().getTime()){
                            var r=confirm("A data de validade do EPI já está expirada. Isso está correto?");
                            if(r==true){
                                return true;
                            }
                            else{
                                alert("");
                            }
                    }
	
				}
                </script>      
	</head>
	<body class="is-preload landing">     
		<div id="main" class="wrapper style1">
			<div class="container">
				<section id="content">
					<form name="CadastrarEpi" method="post" action="CadastrarEpi">
                       <div>
                         <label for="validadeepi">Validade do EPI: *</label>
                         <input type="text" name="validadeEpi" maxlength="10"placeholder = "dd/mm/aaaa" onchange="comparar(validadeEpi)" required/>
                        </div>                     
                        <br/>
                        <input type="submit" value="Cadastrar" onclick="comparar(validadeEpi)">
                        <input type="reset" value="Limpar">                           
                     </form>                          
				</section>
			</div>
		</div>
	</body>
</html>

 

Editado por Ana Grossi

Compartilhar este post


Link para o post
Compartilhar em outros sites

Sugiro colocar a chamada do método comparar no evento onsubmit do <form> . Fiz uma pequena modificação na lógica deste método.

nota: Acredito que o método validateDate(id) é para ser chamado no evento onchange do input

Segue abaixo as modificação que fiz:

 

<html>
	<head>
		<title>Cadastro de EPI</title>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
		<link rel="stylesheet" href="assets/css/main.css" />
		<noscript><link rel="stylesheet" href="assets/css/noscript.css" /></noscript>
                <script>
                function validateDate(id) {
                   var RegExPattern = /^((((0?[1-9]|[12]\d|3[01])[\.\-\/](0?[13578]|1[02])[\.\-\/]((1[6-9]|[2-9]\d)?\d{2}))|((0?[1-9]|[12]\d|30)[\.\-\/](0?[13456789]|1[012])[\.\-\/]((1[6-9]|[2-9]\d)?\d{2}))|((0?[1-9]|1\d|2[0-8])[\.\-\/]0?2[\.\-\/]((1[6-9]|[2-9]\d)?\d{2}))|(29[\.\-\/]0?2[\.\-\/]((1[6-9]|[2-9]\d)?(0[48]|[2468][048]|[13579][26])|((16|[2468][048]|[3579][26])00)|00)))|(((0[1-9]|[12]\d|3[01])(0[13578]|1[02])((1[6-9]|[2-9]\d)?\d{2}))|((0[1-9]|[12]\d|30)(0[13456789]|1[012])((1[6-9]|[2-9]\d)?\d{2}))|((0[1-9]|1\d|2[0-8])02((1[6-9]|[2-9]\d)?\d{2}))|(2902((1[6-9]|[2-9]\d)?(0[48]|[2468][048]|[13579][26])|((16|[2468][048]|[3579][26])00)|00))))$/;

                   if (!((id.value.match(RegExPattern)) && (id.value!=''))) {
                      alert('Por favor, verifique a data digitada.');
                          id.focus();
                   }
                   
                }
                function comparar(id){
                    var data = id.value;

                    var objDate = new Date();
                    objDate.setYear(data.split("/")[2]);
                    objDate.setMonth(data.split("/")[1]  - 1);//- 1 porque em js é de 0 a 11 os meses
                    objDate.setDate(data.split("/")[0]);
                    
                    
                    if(objDate.getTime() < new Date().getTime()){
                            var r=confirm("A data de validade do EPI está expirada. Deseja cadastrar mesmo assim?");								
                            if(r===false){								
                                return false;
                            }                        
                    }	
				}
                </script>      
	</head>
	<body class="is-preload landing">     
		<div id="main" class="wrapper style1">
			<div class="container">
				<section id="content">
					<form name="CadastrarEpi" method="post" action="CadastrarEpi" onsubmit="return comparar(validadeEpi)">
                       <div>
                         <label for="validadeepi">Validade do EPI: *</label>
                         <input type="text" name="validadeEpi" maxlength="10" placeholder = "dd/mm/aaaa" onchange="validateDate(validadeEpi)" required/>
                        </div>                     
                        <br/>
                        <input type="submit" value="Cadastrar">
                        <input type="reset" value="Limpar">                           
                     </form>                          
				</section>
			</div>
		</div>
	</body>
</html>

 

  • Curtir 1

Compartilhar este post


Link para o post
Compartilhar em outros sites

@Gracyane Oliveira Olá. Não programo em JavaScript e muito pouco em HTML, mas tenho curiosidade com essa área de front-end

Notei que você está usando a codificação UTF-8 no HTML. Logo, por quê quando eu coloco uma data já expirada aparece erro na codificação da mensagem, ou seja, na acentuação?

Se usei algum termo errado desculpa rs... e já pode me corrigir também, pois assim aprendo algo novo 

Editado por giu_d
  • Curtir 1

Compartilhar este post


Link para o post
Compartilhar em outros sites

@giu_dAqui pra mim está normal. Testei nos navegadores chrome e mozilla. A acentuação está ok pra mim.

A tag <meta charset="utf-8" /> é que define o charset de formatação. 

Como fica o texto pra você?

Editado por Gracyane Oliveira
  • Curtir 1

Compartilhar este post


Link para o post
Compartilhar em outros sites

@Gracyane Oliveira Olá. O mesmo problema deu no Chrome e Edge. Segue um print:

Capturar.PNG.67ac264b1065be0c01278c50a1a52385.PNG

 

Devo confessar que fiquei curioso com relação a isso devido a saber que a codificação UTF-8 é a mais recomendada para o HMTL 5

Obs: Creio que no Tor Browser não convém testar rs...

Editado por giu_d

Compartilhar este post


Link para o post
Compartilhar em outros sites

@giu_d 

Em geral o padrão dos browsers é utf-8, mas alguns podem vir configurado para o encoding ISO-8859-15.

Outra opção é, apesar de estar com a tag meta configurada, o seu arquivo pode ter sido salvo com algum outro encoding. Experimente forçar o arquivo a salvar em UTF-8 e se nada mudar, re-rescrever os caracteres acentuados.

  • Curtir 1

Compartilhar este post


Link para o post
Compartilhar em outros sites

@Gracyane Oliveira Olá. Desculpa a demora em responder. É que tinha jogado o código no bloco de notas mesmo

Resolvi baixar e instalar agora o Komodo Edit e resolveu o problema!

Obrigado pela paciência e parabéns pelo código

Pretendo futuramente, se Deus assim permitir, estudar sobre desenvolvimento Web e por isso a curiosidade :D

  • Curtir 1

Compartilhar este post


Link para o post
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisar ser um membro para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar agora





Sobre o Clube do Hardware

No ar desde 1996, o Clube do Hardware é uma das maiores, mais antigas e mais respeitadas publicações sobre tecnologia do Brasil. Leia mais

Direitos autorais

Não permitimos a cópia ou reprodução do conteúdo do nosso site, fórum, newsletters e redes sociais, mesmo citando-se a fonte. Leia mais

×