Carpeta js
This commit is contained in:
Axel Axt
@@ -0,0 +1,336 @@
|
||||
document.addEventListener("DOMContentLoaded", () => {
|
||||
|
||||
if (serverErrors.length > 0) mostrarErrores(serverErrors);
|
||||
if (serverSuccess.length > 0) mostrarSuccess(serverSuccess);
|
||||
|
||||
const form = document.getElementById("form-config-empresa");
|
||||
if (!form) return;
|
||||
|
||||
// Funciones utilitarias
|
||||
|
||||
function isEmpty(value) {
|
||||
return !value || value.trim() === '';
|
||||
}
|
||||
|
||||
function isValidNombre(value) {
|
||||
return /^[A-Za-zÁÉÍÓÚáéíóú0-9\s.\-]{2,100}$/.test(value);
|
||||
}
|
||||
|
||||
function isValidTexto(value) {
|
||||
return /^[A-Za-zÁÉÍÓÚáéíóúñÑ\s]{2,100}$/.test(value);
|
||||
}
|
||||
|
||||
function isValidEmail(value) {
|
||||
return /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/.test(value);
|
||||
}
|
||||
|
||||
function isValidTelefono(value) {
|
||||
return /^[0-9]{10}$/.test(value);
|
||||
}
|
||||
|
||||
function isValidCP(value) {
|
||||
return /^[0-9]{4}$/.test(value);
|
||||
}
|
||||
|
||||
function isValidCuit(value) {
|
||||
return /^\d{10,11}$/.test(value);
|
||||
}
|
||||
|
||||
// Submit
|
||||
|
||||
form.addEventListener("submit", (e) => {
|
||||
|
||||
let errores = [];
|
||||
|
||||
const nombre = form.querySelector("input[name='nombre']");
|
||||
const direccion = form.querySelector("input[name='direccion']");
|
||||
const ciudad = form.querySelector("input[name='ciudad']");
|
||||
const codigo_postal = form.querySelector("input[name='codigo_postal']");
|
||||
const provincia = form.querySelector("input[name='provincia']");
|
||||
const telefono = form.querySelector("input[name='telefono']");
|
||||
const email = form.querySelector("input[name='email']");
|
||||
const cuit = form.querySelector("input[name='cuit']");
|
||||
const iva = form.querySelector("input[name='iva']");
|
||||
const cargo = form.querySelector("input[name='cargo_cancelacion_servicio']");
|
||||
const email_emisor = form.querySelector("input[name='email_emisor']");
|
||||
|
||||
const apM = form.querySelector("input[name='hora_apertura_maniana']");
|
||||
const ciM = form.querySelector("input[name='hora_cierre_maniana']");
|
||||
const apT = form.querySelector("input[name='hora_apertura_tarde']");
|
||||
const ciT = form.querySelector("input[name='hora_cierre_tarde']");
|
||||
|
||||
// Limpiar estados previos
|
||||
|
||||
form.querySelectorAll(".is-invalid").forEach(el =>
|
||||
el.classList.remove("is-invalid")
|
||||
);
|
||||
|
||||
// NOMBRE
|
||||
|
||||
if (nombre) {
|
||||
if (isEmpty(nombre.value)) {
|
||||
errores.push("El nombre es obligatorio.");
|
||||
nombre.classList.add("is-invalid");
|
||||
} else if (!isValidNombre(nombre.value)) {
|
||||
errores.push("El nombre contiene caracteres inválidos.");
|
||||
nombre.classList.add("is-invalid");
|
||||
} else if (nombre.value.length < 2) {
|
||||
errores.push("El nombre debe tener al menos 2 caracteres.");
|
||||
nombre.classList.add("is-invalid");
|
||||
} else if (nombre.value.length > 50) {
|
||||
errores.push("El nombre no puede superar los 50 caracteres.");
|
||||
nombre.classList.add("is-invalid");
|
||||
}
|
||||
}
|
||||
|
||||
// DIRECCIÓN
|
||||
|
||||
if (direccion) {
|
||||
if (isEmpty(direccion.value)) {
|
||||
errores.push("La dirección es obligatoria.");
|
||||
direccion.classList.add("is-invalid");
|
||||
} else if (direccion.value.length < 3) {
|
||||
errores.push("La dirección debe tener al menos 3 caracteres.");
|
||||
direccion.classList.add("is-invalid");
|
||||
} else if (direccion.value.length > 100) {
|
||||
errores.push("La dirección no puede superar los 100 caracteres.");
|
||||
direccion.classList.add("is-invalid");
|
||||
}
|
||||
}
|
||||
|
||||
// CIUDAD
|
||||
|
||||
if (ciudad) {
|
||||
if (isEmpty(ciudad.value)) {
|
||||
errores.push("La ciudad es obligatoria.");
|
||||
ciudad.classList.add("is-invalid");
|
||||
} else if (!isValidTexto(ciudad.value)) {
|
||||
errores.push("La ciudad solo puede contener letras y espacios.");
|
||||
ciudad.classList.add("is-invalid");
|
||||
}
|
||||
}
|
||||
|
||||
// CÓDIGO POSTAL
|
||||
|
||||
if (codigo_postal) {
|
||||
if (isEmpty(codigo_postal.value)) {
|
||||
errores.push("El código postal es obligatorio.");
|
||||
codigo_postal.classList.add("is-invalid");
|
||||
} else if (!isValidCP(codigo_postal.value)) {
|
||||
errores.push("El código postal debe tener 4 dígitos.");
|
||||
codigo_postal.classList.add("is-invalid");
|
||||
}
|
||||
}
|
||||
|
||||
// PROVINCIA
|
||||
|
||||
if (provincia) {
|
||||
if (isEmpty(provincia.value)) {
|
||||
errores.push("La provincia es obligatoria.");
|
||||
provincia.classList.add("is-invalid");
|
||||
} else if (!isValidTexto(provincia.value)) {
|
||||
errores.push("La provincia contiene caracteres inválidos.");
|
||||
provincia.classList.add("is-invalid");
|
||||
}
|
||||
}
|
||||
|
||||
// TELÉFONO
|
||||
|
||||
if (telefono) {
|
||||
if (isEmpty(telefono.value)) {
|
||||
errores.push("El teléfono es obligatorio.");
|
||||
telefono.classList.add("is-invalid");
|
||||
} else if (!isValidTelefono(telefono.value)) {
|
||||
errores.push("El teléfono debe tener 10 dígitos.");
|
||||
telefono.classList.add("is-invalid");
|
||||
}
|
||||
}
|
||||
|
||||
// EMAIL
|
||||
|
||||
if (email) {
|
||||
if (isEmpty(email.value)) {
|
||||
errores.push("El email es obligatorio.");
|
||||
email.classList.add("is-invalid");
|
||||
} else if (!isValidEmail(email.value)) {
|
||||
errores.push("El email no tiene un formato válido.");
|
||||
email.classList.add("is-invalid");
|
||||
} else if (email.value.length > 100) {
|
||||
errores.push("El email no puede superar los 100 caracteres.");
|
||||
email.classList.add("is-invalid");
|
||||
}
|
||||
}
|
||||
|
||||
// CUIT
|
||||
|
||||
if (cuit) {
|
||||
if (!isValidCuit(cuit.value)) {
|
||||
errores.push("CUIT inválido.");
|
||||
cuit.classList.add("is-invalid");
|
||||
}
|
||||
}
|
||||
|
||||
// IVA
|
||||
|
||||
if (iva) {
|
||||
if (iva.value && isNaN(iva.value)) {
|
||||
errores.push("El IVA debe ser numérico.");
|
||||
iva.classList.add("is-invalid");
|
||||
}
|
||||
}
|
||||
|
||||
// CARGO CANCELACIÓN
|
||||
|
||||
if (cargo) {
|
||||
if (cargo.value && isNaN(cargo.value)) {
|
||||
errores.push("El cargo por cancelación debe ser numérico.");
|
||||
cargo.classList.add("is-invalid");
|
||||
}
|
||||
}
|
||||
|
||||
// EMAIL EMISOR
|
||||
|
||||
if (email_emisor) {
|
||||
if (isEmpty(email_emisor.value)) {
|
||||
errores.push("El email emisor es obligatorio.");
|
||||
email_emisor.classList.add("is-invalid");
|
||||
} else if (!isValidEmail(email_emisor.value)) {
|
||||
errores.push("El email emisor no tiene un formato válido.");
|
||||
email_emisor.classList.add("is-invalid");
|
||||
} else if (email_emisor.value.length > 100) {
|
||||
errores.push("El email emisor no puede superar los 100 caracteres.");
|
||||
email_emisor.classList.add("is-invalid");
|
||||
}
|
||||
}
|
||||
|
||||
// HORARIOS
|
||||
|
||||
if (apM && ciM) {
|
||||
if (apM.value && ciM.value && apM.value >= ciM.value) {
|
||||
errores.push("El horario de apertura de la mañana debe ser menor al de cierre.");
|
||||
apM.classList.add("is-invalid");
|
||||
ciM.classList.add("is-invalid");
|
||||
}
|
||||
}
|
||||
|
||||
if (apT && ciT) {
|
||||
if (apT.value && ciT.value && apT.value >= ciT.value) {
|
||||
errores.push("El horario de apertura de la tarde debe ser menor al de cierre.");
|
||||
apT.classList.add("is-invalid");
|
||||
ciT.classList.add("is-invalid");
|
||||
}
|
||||
}
|
||||
|
||||
// Resultado
|
||||
|
||||
if (errores.length > 0) {
|
||||
e.preventDefault();
|
||||
mostrarErrores(errores);
|
||||
}
|
||||
});
|
||||
|
||||
// FUNCIÓN PARA MOSTRAR ERRORES
|
||||
|
||||
function mostrarErrores(errores) {
|
||||
|
||||
// Buscar si hay un toast previo
|
||||
|
||||
const viejo = document.getElementById("toastErrores");
|
||||
|
||||
// Si existe, se elimina (evita duplicados)
|
||||
|
||||
if (viejo) viejo.remove();
|
||||
|
||||
// Crea el contenedor del toast
|
||||
|
||||
const toast = document.createElement("div");
|
||||
|
||||
// Se le asigna ID para identificarlo
|
||||
|
||||
toast.id = "toastErrores";
|
||||
|
||||
// Clases de estilo (Bootstrap + CSS)
|
||||
|
||||
toast.className = "toast-flotante alert alert-danger";
|
||||
|
||||
// Inserta el contenido dinámico (lista de errores)
|
||||
|
||||
toast.innerHTML = `
|
||||
<strong>Se encontraron errores:</strong>
|
||||
<ul class="mb-0 mt-2">
|
||||
${errores.map(e => `<li>${e}</li>`).join("")} <!-- convierte array a <li> -->
|
||||
</ul>
|
||||
`;
|
||||
|
||||
// Agrega el toast al body (lo hace visible)
|
||||
|
||||
document.body.appendChild(toast);
|
||||
|
||||
// Auto-cierre
|
||||
|
||||
setTimeout(() => {
|
||||
|
||||
// Agrega clase para animación de salida (CSS)
|
||||
|
||||
toast.classList.add("toast-out");
|
||||
|
||||
// Elimina el elemento después de la animación
|
||||
|
||||
setTimeout(() => {
|
||||
toast.remove(); // Elimina el DOM
|
||||
}, 350);
|
||||
|
||||
}, 5000); // Visible durante 5 segundos
|
||||
}
|
||||
});
|
||||
|
||||
// FUNCIÓN PARA MOSTRAR SUCCESS
|
||||
|
||||
function mostrarSuccess(mensajes) {
|
||||
|
||||
// Elimina toast previo de éxito si existe
|
||||
|
||||
const viejo = document.getElementById("toastSuccess");
|
||||
if (viejo) viejo.remove();
|
||||
|
||||
// Crea el contenedor del toast
|
||||
|
||||
const toast = document.createElement("div");
|
||||
|
||||
// Se le asigna ID único
|
||||
|
||||
toast.id = "toastSuccess";
|
||||
|
||||
// Estilo
|
||||
|
||||
toast.className = "toast-flotante alert alert-success";
|
||||
|
||||
// Inserta mensajes dinámicos
|
||||
|
||||
toast.innerHTML = `
|
||||
<strong>Mensajes de éxito:</strong>
|
||||
<ul class="mb-0 mt-2">
|
||||
${mensajes.map(m => `<li>${m}</li>`).join("")}
|
||||
</ul>
|
||||
`;
|
||||
|
||||
// Agrega al DOM
|
||||
|
||||
document.body.appendChild(toast);
|
||||
|
||||
// Auto-cierre a los 5 segundos
|
||||
|
||||
setTimeout(() => {
|
||||
|
||||
// Animación de salida
|
||||
|
||||
toast.classList.add("toast-out");
|
||||
|
||||
// Eliminación final
|
||||
|
||||
setTimeout(() => {
|
||||
toast.remove();
|
||||
}, 350);
|
||||
|
||||
}, 5000);
|
||||
}
|
||||
Reference in New Issue
Block a user