Tengo un formulario simple que me gustaría verificar que tenga datos válidos antes de enviar y guardar los datos.
Sin embargo, debido a que fetch(...) es asíncrono, no puedo hacer que la validación se detenga y espere el resultado.
¿Hay alguna manera de evitar que la búsqueda sea asíncrona?
¿O es quizás una mejor manera de hacer esto?
form.addEventListener('submit', (event) => { fetch(`/check?id=${id}`) .then((res) => res.json()) .then((json) => { if (json.error) { // Prevent the submit here // event.preventDefault(); } }); });Si desea una experiencia amigable con la interfaz de usuario, puede agregar oyentes onfocusout() o onblur() a cada campo del formulario y validar cada entrada a medida que se ingresan. Puede deshabilitar el botón Enviar para el formulario de forma predeterminada y solo habilitarlo cuando hayan pasado todas las validaciones. Algo como esto:
function validateId() { let id = document.forms.myForm.id.value; if(id === ""){ document.forms.myForm.submit.disabled = true; return; } fetch(`https://api.github.com/users/${id}/repos`) .then((res) => res.json()) .then((json) => { if (json.error) { // fail validation alert("Failed!"); document.forms.myForm.submit.disabled = true; } else { // success document.forms.myForm.submit.disabled = false; } }) .catch(error => { alert("Error! " + error); document.forms.myForm.submit.disabled = true; }); } <form name="myForm" action="/action_page.php" method="post"> ID: <input type="text" name="id" onfocusout="validateId()"> <input type="submit" name="submit" value="Submit" disabled> </form>