Java Exibir confirm do JavaScript antes de cadastrar

Ana Grossi · 15 de setembro de 2018

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>

Gracyane Oliveira · 15 de setembro de 2018

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>

16 de setembro de 2018

@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

Gracyane Oliveira · 16 de setembro de 2018

@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ê?

16 de setembro de 2018

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

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...

Gracyane Oliveira · 16 de setembro de 2018

@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.