Tengo que hacer un formulario que tenga un nombre de usuario y una contraseña, pero la contraseña debe tener cinco o más caracteres. He probado muchos métodos diferentes pero ninguno ha tenido éxito.
Aquí está mi javascript:
funtion validateForm(){ var password = document.getElementById('password').value; if (password.length < 5) alert("Password must be longer"); return false; } }y mi HTML:
<html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title>Login</title> <script src="js/script.js" charset="utf-8"></script> </head> <body> <div id="error"> </div> <form name="formname" action="/action_page.php" onsubmit="validateForm()" method="post"> <div> <label for="name">Username:</label> <input id="username" name="name" type="text" required> </div> <div> <label for="password">Password:</label> <input id="password" name="password" type="password"> <input type="submit" value="Submit"> </div> </form> </body> </html>Debe usar Event.preventDefault() para evitar que falle el envío del formulario en la validación. Y para hacerlo, debe pasar el evento a su controlador como onsubmit="validateForm(event)" .
Consulte el fragmento de código para comprender cómo funciona.
function validateForm(event) { var password = document.getElementById('password').value; if (password.length < 5) { event.preventDefault(); // <--- ADDED alert("Password must be longer"); return false; } } <div id="error"> </div> <form name="formname" action="/action_page.php" onsubmit="validateForm(event)" method="post"> <div> <label for="name">Username:</label> <input id="username" name="name" type="text" required> </div> <div> <label for="password">Password:</label> <input id="password" name="password" type="password"> <input type="submit" value="Submit"> </div> </form>