¿Cómo puedo validar el siguiente formulario con otro método como métodos asincrónicos (promesas o espera asincrónica)?
En el siguiente formulario, el formulario se valida si onsubmit="return validForm()" es igual al booleano verdadero y no se valida si onsubmit="return validarForm()" es igual al booleano falso.
Mi problema es: las funciones asincrónicas siempre devuelven promesas y no devuelven valores booleanos...
<!DOCTYPE html> <html> <head> <title>Hello Javascript</title> <script type = "text/javascript"> function validateForm() { var u = document.getElementById("username").value; var p = document.getElementById("password").value; if(u== "") { alert("Please enter your Username"); return false; } if(p == "") { alert("Please enter you Password"); return false; } alert("All datas are valid!, send it to the server!") return true; } </script> </head> <body> <h2>Enter your Username and Password</h2> <div style="border:1px solid #ddd; padding: 5px;"> <form method="POST" action="process-action.html" onsubmit = "return validateForm()"> Username: <input type="text" name="username" id="username"/> <br><br> Password: <input type="password" name = "password" id="password"/> <br><br> <button type="submit">Submit</button> </form> </div> </body> </html>El código de validación que escribió es un código del lado del cliente síncrono y no necesita promesas para ejecutarlo.
Lo que debe hacer aquí es usar e.preventDefault porque, de lo contrario, el botón Enviar intentará activar el envío de un formulario al servidor.
Mira esta respuesta como ejemplo.
Si toma este camino, use e.preventDefault para evitar que se active el envío del formulario, valide el formulario y envíelo iniciando una llamada ajax en su lugar.