Skip to content

Commit

Permalink
feat(usuários): foram implementados alertas visuais nos campos do for…
Browse files Browse the repository at this point in the history 
…mulário
  • Loading branch information
@MarcosViniciusG
MarcosViniciusG committed Aug 15, 2024
1 parent 87c75dc commit 4ca22ba
Show file tree
Hide file tree
Showing 5 changed files with 210 additions and 82 deletions.
62 changes: 38 additions & 24 deletions lgbtq_connect/assets/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -74,43 +74,57 @@

<div id="div_form" style="display: none;">
<form id="meu_formulario" method="post" action="#">
<label for="nome" id="labelnome">Nome do local:</label>
<input type="text" name="nome" id="nome"><br>

<label for="email">Email:</label>
<input type="email" name="email" id="email_f"><br>
<div id="nomePacote">
<label for="nome" id="labelnome">Nome do local:</label>
<p style="display: none;">O nome deve ter no mínimo 3 caracteres e não conter nenhum caractere especial (#, *, &, etc)</p>
<input type="text" name="nome" id="nome" oninput="Verificador.verificarNome()">
</div>

<div id="emailPacote">
<label for="email">Email:</label>
<p style="display: none;">O email deve estar em um formato válido. Exemplo: [email protected]</p>
<input type="email" name="email" id="email_f" oninput="Verificador.verificarEmail()"><br>
</div>

<label for="servico">Escolha o tipo de serviço:</label><br>
<select id="servico" name="servico" onchange="mostrarOutro()">
<option value="" selected disabled>Selecione...</option>
<option value="bar/restaurante">Bares/restaurantes</option>
<option value="entretenimento">Entretenimento</option>
<option value="beleza">Beleza</option>
<option value="hospedagem">Hospedagem</option>
<option value="ensino">Ensino</option>
<option value="academia">Academia</option>
<option value="outro">Outro</option>
</select>
<div id="servicoPacote">
<label for="servico">Escolha o tipo de serviço:</label><br>
<p style="display: none;">Escolha algum serviço</p>
<select id="servico" name="servico" onchange="mostrarOutro()">
<option value="" selected disabled>Selecione...</option>
<option value="bar/restaurante">Bares/restaurantes</option>
<option value="entretenimento">Entretenimento</option>
<option value="beleza">Beleza</option>
<option value="hospedagem">Hospedagem</option>
<option value="ensino">Ensino</option>
<option value="academia">Academia</option>
<option value="outro">Outro</option>
</select>
</div>

<div id="outroServico" class="escondido">
<label for="servico_outro">Especifique:</label>
<input type="text" name="servico_outro" id="servico_outro" maxlength="30" minlength="3">

<p style="display: none;">O serviço deve ter no mínimo 3 caracteres e no máximo 30 caracteres e não conter nenhum caractere especial</p>
<input type="text" name="servico_outro" id="servico_outro" oninput="Verificador.verificarServico()" maxlength="30" minlength="3">
</div>

<label for="descricao">Descrição:</label>
<textarea name="descricao" id="descricao" rows="3" cols="70" placeholder="Descrição ..."></textarea>
<div id="descricaoPacote">
<label for="descricao">Descrição:</label>
<p style="display: none;">A descrição deve ter no mínimo 3 caracteres e não conter nenhum caractere especial (#, *, &, etc)</p>
<textarea name="descricao" id="descricao" rows="3" cols="70" placeholder="Descrição ..." oninput="Verificador.verificarDescricao()"></textarea>
</div>

<div class="search_wrapper">
<input type="text" id="searchInputForm" placeholder="Pesquise a cidade ou estado...">
<button type="button" onclick="pesquisar('searchInputForm', 'listaResultadosForms')" class="button_search">Pesquisar</button>
</div>
<div id="listaResultadosForms"></div>
<div id="mapa_formulario" style="height: 300px;margin-bottom:10px;"></div>

<!-- Input de latitude e longitude -->
<input type="hidden" name="latitude" id="latitude">
<input type="hidden" name="longitude" id="longitude">
<div id="coordenadasPacote">
<p style="display: none;">Escolha algum lugar para poder enviar o formulário</p>
<input type="hidden" name="latitude" id="latitude">
<input type="hidden" name="longitude" id="longitude">
</div>
<div id="mapa_formulario" style="height: 300px;margin-bottom:10px;"></div>

<input class="blue_button" type="submit" value="Enviar">
</form>
Expand Down
172 changes: 118 additions & 54 deletions lgbtq_connect/assets/js/formulario.js
View file
Original file line number Diff line number Diff line change
@@ -1,75 +1,136 @@
const ajaxUrl = my_ajax_object.ajax_url;

// Função para verificar se a entrada livre possui algum caractere especial
// Retorna verdadeiro se tem
// Retorna falso se não tem
function temCaractereEspecial(el) {
let tem = /[!#$%&()*+\/<=>?@[\\\]_{|}]/.test(el.value);

if(tem) {
el.classList.add('entrada-invalida');
// Classe estática contendo todas as funções
// relacionadas a verificação dos valores de entrada do formulário
class Verificador {
static nome="";
static email = "";
static servico = "";
static servico_outro = "";
static descricao = "";
static latitude = "";
static longitude = "";

static verificarTudo() {
let nome = this.verificarNome();
let email_f = this.verificarEmail();
let servico = this.verificarServico();
let descricao = this.verificarDescricao();
let coordernadas = this.verificarCoordenadas();

return (nome && email_f && servico && descricao && coordernadas);
}
else {
el.classList.remove('entrada-invalida');

static verificarNome() {
let verificacao = true;

let vazio = this.entradaEstaVazia(this.nome);
let especial = this.temCaractereEspecial(this.nome);

if(vazio || especial)
verificacao = false;

this.verificarFinal(this.nome, verificacao);
return verificacao;
}

return tem;
}
static verificarEmail() {
let verificacao = true;

let vazio = this.entradaEstaVazia(this.email);

// Função para verificar se a entrada está vazia
// Retorna verdadeiro se estiver vazia
// Retorna falso se não estiver vazia
function entradaEstaVazia(el) {
let esta = (el.value === '');
if(vazio)
verificacao = false;

if (verificacao) {
let padrao = /^\w+@[a-zA-Z_]+?\.[a-zA-Z]+?/;
verificacao = padrao.test(this.email.value);
}

if(esta) {
el.classList.add('entrada-invalida');
this.verificarFinal(this.email, verificacao);
return verificacao;
}
else {
el.classList.remove('entrada-invalida');

static verificarServico() {
let verificacao = true;
const self = this;

if(self.servico_outro.parentNode.classList.contains("escondido")) {
if(self.entradaEstaVazia(self.servico))
verificacao = false;
}
else {
if(self.entradaEstaVazia(self.servico_outro) || self.temCaractereEspecial(self.servico_outro))
verificacao = false;
}

this.verificarFinal(this.servico_outro, verificacao);
return verificacao;
}

return esta;
}
static verificarDescricao() {
let verificacao = true;

document.addEventListener('DOMContentLoaded', function () {
$('#meu_formulario').on('submit', function (e) {
e.preventDefault();
let vazio = this.entradaEstaVazia(this.descricao);
let especial = this.temCaractereEspecial(this.descricao);

const nome = document.getElementById('nome');
const email = document.getElementById('email_f');
const latitude = document.getElementById('latitude');
const longitude = document.getElementById('longitude');
const servico = document.getElementById('servico');
const descricao = document.getElementById('descricao')
const outroServico = document.getElementById('servico_outro');
if(vazio || especial)
verificacao = false;

// Todas as entradas do formulário em uma array
const entradas = [nome, email, latitude, longitude, descricao, servico, outroServico];
this.verificarFinal(this.descricao, verificacao);
return verificacao;
}

// Entradas livres são aquelas que o usuário pode digitar
const entradasLivres = [nome, descricao, outroServico];
static verificarCoordenadas() {
let verificacao = true;

// Verificar se todas as entradas do formulário estão preenchidas
let temEntradaVazia = false;
for(let i=0; i<entradas.length; i++) {
if(!temEntradaVazia)
temEntradaVazia = entradaEstaVazia(entradas[i]);
else
entradaEstaVazia(entradas[i]);
}
let vazioLatitude = this.entradaEstaVazia(this.latitude);
let vazioLongitude = this.entradaEstaVazia(this.longitude);

if(vazioLatitude || vazioLongitude)
verificacao = false;

this.verificarFinal(this.latitude, verificacao);
return verificacao;
}

static verificarFinal(el, verificacao) {
const pacote = el.parentNode;

// Verificar se todas as entradas livres do formulário não tem caracteres especiais
let temEntradaComCaractereEspecial = false;
for(let i=0; i<entradasLivres.length; i++) {
if(!temEntradaComCaractereEspecial)
temEntradaComCaractereEspecial = temCaractereEspecial(entradasLivres[i]);
else
temCaractereEspecial(entradasLivres[i])
if(verificacao) {
pacote.classList.add('entrada-valida');
pacote.classList.remove('entrada-invalida');
}

else {
pacote.classList.add('entrada-invalida');
pacote.classList.remove('entrada-valida');
}
}

static temCaractereEspecial(el) {
return /[!#$%&()*+\/<=>?@[\\\]_{|}]/.test(el.value);
}

static entradaEstaVazia(el) {
return el.value.length < 3;
}

static reiniciarEntradas() {
this.nome.parentNode.className="";
this.email.parentNode.className="";
this.servico.parentNode.className="";
this.servico_outro.parentNode.className="";
this.latitude.parentNode.className="";
this.descricao.parentNode.className="";
}
}

document.addEventListener('DOMContentLoaded', function () {
$('#meu_formulario').on('submit', function (e) {
e.preventDefault();

// Encerra a função caso as entradas forem inválidas
if(temEntradaVazia || temEntradaComCaractereEspecial)
if(!Verificador.verificarTudo())
return;

// Serializa os dados do formulário
Expand All @@ -84,6 +145,9 @@ document.addEventListener('DOMContentLoaded', function () {
formData: formData, // Data do formulário
},
success: function (response) {
// Reinicia as entradas
Verificador.reiniciarEntradas();

// Se o envio for bem-sucedido, realiza a transição para a página de finalização
transicaoPagina("PaginaComPopup", "div_saida");
},
Expand Down
3 changes: 1 addition & 2 deletions lgbtq_connect/assets/js/funcionalidades.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -124,11 +124,10 @@ function mostrarOutro() {
var outroInput = document.getElementById("servico_outro");
if (select.value === "outro") {
outroCampo.classList.remove("escondido");
outroInput.setAttribute("required", "required");
}
else {
outroCampo.classList.add("escondido");
outroInput.removeAttribute("required");
outroInput.value = "";
}
}

Expand Down
12 changes: 11 additions & 1 deletion lgbtq_connect/assets/js/script.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -154,6 +154,8 @@ class PaginaFormulario extends Pagina {
// Atualiza os valores dos campos de entrada ocultos
document.getElementById('latitude').value = lat;
document.getElementById('longitude').value = lng;

Verificador.verificarCoordenadas();
});

this.mapa.mapa.on('contextmenu', function (e) {
Expand All @@ -163,6 +165,7 @@ class PaginaFormulario extends Pagina {
self.mapa.mapa.removeLayer(self.marcador);
document.getElementById('latitude').value = '';
document.getElementById('longitude').value = '';
Verificador.verificarCoordenadas();
self.marcador = null;
}
});
Expand Down Expand Up @@ -210,7 +213,14 @@ function transicaoPagina(tipo, id) {

// Inicializa o plugin
window.onload = function () {
transicaoPagina("PaginaComPopup", "div_index")
transicaoPagina("PaginaComPopup", "div_index");
Verificador.nome = document.getElementById("nome");
Verificador.email = document.getElementById("email_f");
Verificador.servico = document.getElementById("servico");
Verificador.servico_outro = document.getElementById("servico_outro");
Verificador.descricao = document.getElementById("descricao");
Verificador.latitude = document.getElementById("latitude");
Verificador.longitude = document.getElementById("longitude");
}

function abrirFiltroServico(){
Expand Down
43 changes: 42 additions & 1 deletion lgbtq_connect/assets/styles/styles.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -55,12 +55,15 @@
width:97%;
resize:none;
background-color:#F5F5F5;
margin-bottom:10px;
border: 1px solid #D0D0D0;
border-radius:10px;
padding:10px;
}

#nomePacote, #emailPacote, #descricaoPacote, #outroServico {
margin-bottom:10px;
}

#searchInputIndex, #searchInputForm{
width: 90%;
padding:10px !important;
Expand Down Expand Up @@ -279,4 +282,42 @@

.name_servico[value="outros"] {
accent-color: gray;
}

.entrada-valida input {
border-color: lightgreen!important;
}

.entrada-valida textarea {
border-color: lightgreen!important;
}

.entrada-valida select {
border-color: lightgreen!important;
}

.entrada-valida label {
color: lightgreen!important;
}

.entrada-invalida input {
border-color: red!important;
}

.entrada-invalida textarea {
border-color: red!important;
}

.entrada-invalida select {
border-color: red!important;
}

.entrada-invalida label {
color: red;
}

.entrada-invalida p {
display: block!important;
font-size: small;
color: red;
}

0 comments on commit 4ca22ba

Please sign in to comment.