Estoy tratando de validar mi formulario manteniendo los estilos que hice para él, evitando así el comportamiento predeterminado del formulario. Pero resulta que cuando presiono el botón de enviar, mi formulario no se envía.
Eliminando el preventDefault(); al formulario, no se ejecuta la función que realicé para comprobarlo.
const $form = document.querySelector('.contact-form'), $user = document.querySelector('#name') let counter = 0; $form.addEventListener('submit', e => { e.preventDefault(); checkInputs(); }) $user.addEventListener('click', (e) => { const groupControl = $user.parentElement, p = groupControl.querySelector('p'); p.classList.remove('show-error-message'); }) const showErrorFor = (input, error) => { const groupControl = input.parentElement, p = groupControl.querySelector('p'); p.innerText = error; p.classList.add('show-error-message'); } const validFields = (input) => { const groupControl = input.parentElement, p = groupControl.querySelector('p'); p.classList.remove('show-error-message'); counter++; } const checkInputs = () => { const userValue = $user.value.trim(); userValue === "" ? showErrorFor($user, "Porfavor ingrese su nombre!") : validFields($user); } const isValidNumberPhone = (phone) => { return /^[0-9]*(\.?)[0-9]+$/.test(phone); } <pre><code> <form action="./mail/send.php" method="POST" class="contact-form" autocomplete="off" novalidate="novalidate"> <!-- #simple_form --> <div class="info-user"> <div class="control"> <input type="text" autocomplete="off" class="input-control" id = "name" placeholder="Ingrese su nombre *" required> <p class="error"></p> </div> <div id="success"></div> <button type="submit" class="botones btn-primary" id="send_button">Enviar</button> </div> </form> </code></pre>Use event.preventDefault() y luego tome el elemento del formulario y envíelo con document.getElementById("myForm").submit(); , suponiendo que le dé a la etiqueta del formulario una identificación de myForm