feat: melhorias na interface e estrutura do frontend

2025-04-02 14:14:37 -03:00
parent 9d17c66c46
commit 54261e455c
9 changed files with 1009 additions and 274 deletions
--- a/static/js/forms.js
+++ b/static/js/forms.js
@@ -0,0 +1,146 @@
+// Validação de CPF
+function validarCPF(cpf) {
+    cpf = cpf.replace(/[^\d]/g, '');
+    
+    if (cpf.length !== 11) return false;
+    
+    // Verifica se todos os dígitos são iguais
+    if (/^(\d)\1{10}$/.test(cpf)) return false;
+    
+    // Validação do primeiro dígito verificador
+    let soma = 0;
+    for (let i = 0; i < 9; i++) {
+        soma += parseInt(cpf.charAt(i)) * (10 - i);
+    }
+    let resto = 11 - (soma % 11);
+    let dv1 = resto > 9 ? 0 : resto;
+    
+    if (dv1 !== parseInt(cpf.charAt(9))) return false;
+    
+    // Validação do segundo dígito verificador
+    soma = 0;
+    for (let i = 0; i < 10; i++) {
+        soma += parseInt(cpf.charAt(i)) * (11 - i);
+    }
+    resto = 11 - (soma % 11);
+    let dv2 = resto > 9 ? 0 : resto;
+    
+    if (dv2 !== parseInt(cpf.charAt(10))) return false;
+    
+    return true;
+}
+
+// Validação de email
+function validarEmail(email) {
+    const re = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+    return re.test(email);
+}
+
+// Validação de telefone
+function validarTelefone(telefone) {
+    telefone = telefone.replace(/[^\d]/g, '');
+    return telefone.length >= 10 && telefone.length <= 11;
+}
+
+// Inicialização dos formulários
+document.addEventListener('DOMContentLoaded', function() {
+    // Validação personalizada para CPF
+    const cpfInputs = document.querySelectorAll('input[name="cpf"]');
+    cpfInputs.forEach(input => {
+        input.addEventListener('blur', function() {
+            const cpf = this.value;
+            if (!validarCPF(cpf)) {
+                this.setCustomValidity('CPF inválido');
+                this.classList.add('is-invalid');
+            } else {
+                this.setCustomValidity('');
+                this.classList.remove('is-invalid');
+            }
+        });
+    });
+    
+    // Validação personalizada para email
+    const emailInputs = document.querySelectorAll('input[type="email"]');
+    emailInputs.forEach(input => {
+        input.addEventListener('blur', function() {
+            const email = this.value;
+            if (!validarEmail(email)) {
+                this.setCustomValidity('Email inválido');
+                this.classList.add('is-invalid');
+            } else {
+                this.setCustomValidity('');
+                this.classList.remove('is-invalid');
+            }
+        });
+    });
+    
+    // Validação personalizada para telefone
+    const phoneInputs = document.querySelectorAll('input[name="telefone"]');
+    phoneInputs.forEach(input => {
+        input.addEventListener('blur', function() {
+            const telefone = this.value;
+            if (!validarTelefone(telefone)) {
+                this.setCustomValidity('Telefone inválido');
+                this.classList.add('is-invalid');
+            } else {
+                this.setCustomValidity('');
+                this.classList.remove('is-invalid');
+            }
+        });
+    });
+    
+    // Validação de campos monetários
+    const moneyInputs = document.querySelectorAll('input[type="number"][step="0.01"]');
+    moneyInputs.forEach(input => {
+        input.addEventListener('blur', function() {
+            const value = parseFloat(this.value);
+            if (isNaN(value) || value < 0) {
+                this.setCustomValidity('Valor inválido');
+                this.classList.add('is-invalid');
+            } else {
+                this.setCustomValidity('');
+                this.classList.remove('is-invalid');
+                this.value = value.toFixed(2);
+            }
+        });
+    });
+    
+    // Validação de datas
+    const dateInputs = document.querySelectorAll('input[type="date"]');
+    dateInputs.forEach(input => {
+        input.addEventListener('change', function() {
+            const date = new Date(this.value);
+            const today = new Date();
+            
+            if (this.hasAttribute('min')) {
+                const minDate = new Date(this.getAttribute('min'));
+                if (date < minDate) {
+                    this.setCustomValidity(`A data não pode ser anterior a ${minDate.toLocaleDateString()}`);
+                    this.classList.add('is-invalid');
+                    return;
+                }
+            }
+            
+            if (this.hasAttribute('max')) {
+                const maxDate = new Date(this.getAttribute('max'));
+                if (date > maxDate) {
+                    this.setCustomValidity(`A data não pode ser posterior a ${maxDate.toLocaleDateString()}`);
+                    this.classList.add('is-invalid');
+                    return;
+                }
+            }
+            
+            this.setCustomValidity('');
+            this.classList.remove('is-invalid');
+        });
+    });
+    
+    // Feedback visual para campos obrigatórios
+    const requiredInputs = document.querySelectorAll('input[required], select[required], textarea[required]');
+    requiredInputs.forEach(input => {
+        const label = input.previousElementSibling;
+        if (label && label.tagName === 'LABEL') {
+            label.innerHTML += ' <span class="text-danger">*</span>';
+        }
+    });
+});