document.addEventListener('DOMContentLoaded', () => { const form1 = document.getElementById('form1'); const form2 = document.getElementById('form2'); const form1Message = document.getElementById('form1-message'); const form2Message = document.getElementById('form2-message'); const validateForm = (form, messageElement) => { let isValid = true; messageElement.textContent = ''; // Clear previous messages // Get form elements const nombreInput = form.querySelector('input[name="nombre"]'); const correoInput = form.querySelector('input[name="correo"]'); const telefonoInput = form.querySelector('input[name="telefono"]'); const inputs = [nombreInput, correoInput, telefonoInput]; // Reset error styles inputs.forEach(input => input.classList.remove('input-error')); // --- Validation Checks --- // Check Nombre if (nombreInput.value.trim() === '') { isValid = false; nombreInput.classList.add('input-error'); messageElement.textContent = 'Por favor, ingresa tu nombre.'; } // Check Correo const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; if (correoInput.value.trim() === '') { isValid = false; correoInput.classList.add('input-error'); if (messageElement.textContent === '') messageElement.textContent = 'Por favor, ingresa tu correo electrónico.'; } else if (!emailPattern.test(correoInput.value.trim())) { isValid = false; correoInput.classList.add('input-error'); if (messageElement.textContent === '') messageElement.textContent = 'Por favor, ingresa un correo electrónico válido.'; } // Check Teléfono if (telefonoInput.value.trim() === '') { isValid = false; telefonoInput.classList.add('input-error'); if (messageElement.textContent === '') messageElement.textContent = 'Por favor, ingresa tu número de teléfono.'; } // Add more specific phone validation if needed (e.g., length, digits only) return isValid; }; // Add submit listener to Form 1 if (form1) { form1.addEventListener('submit', (event) => { if (!validateForm(form1, form1Message)) { event.preventDefault(); // Prevent submission if validation fails } else { // Optional: Show a success message or disable button console.log('Form 1 submitted (simulation)'); // event.preventDefault(); // Uncomment to prevent actual submission for testing form1Message.textContent = 'Enviando...'; // Example feedback // You would typically let the form submit here or handle via AJAX } }); } // Add submit listener to Form 2 if (form2) { form2.addEventListener('submit', (event) => { if (!validateForm(form2, form2Message)) { event.preventDefault(); // Prevent submission if validation fails } else { // Optional: Show a success message or disable button console.log('Form 2 submitted (simulation)'); // event.preventDefault(); // Uncomment to prevent actual submission for testing form2Message.textContent = 'Enviando...'; // Example feedback // You would typically let the form submit here or handle via AJAX } }); } });