Estoy tratando de validar la longitud de la contraseña y mostrar un mensaje de advertencia, pero el mensaje es temporal. Intenté usar el atributo onsubmit con el botón de envío, pero aún no funciona.
function validate() { var pw = document.getElementById("password").value if(pw.length<8) { document.getElementById("span").innerHTML = "Password length must be more than 7 characters.<br/>" } } <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <form action=""> <input type="text" id="password"/> <br/> <span id="span" style="color:red;"></span> <button onclick="validate()">Submit</button> </form> </body> </html>A continuación se arreglaron algunas cosas:
validate() , así: onclick="validate(event)" .Event.preventDefault() y return false , pero el primero es mucho más importante.Observe lo que ve a continuación cuando la contraseña es demasiado corta y cuando la contraseña es lo suficientemente larga:
function validate(ev) { var pw = document.getElementById("password").value if(pw.length<8) { document.getElementById("span").innerHTML = "Password length must be more than 7 characters.<br/>"; ev.preventDefault(); return false; } } <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <form action=""> <input type="text" id="password"/> <br/> <span id="span" style="color:red;"></span> <button onclick="validate(event)">Submit</button> </form> </body> </html> document.querySelector('form').addEventListener('submit', validate); function validate(event) { event.preventDefault(); const form = new FormData(event.target); const password = form.get('password').trim(); if (password.length < 8) { document.getElementById("span").innerHTML = "Password length must be more than 7 characters.<br/>" return; } event.target.submit(); } <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <form action=""> <input name="password" type="text" id="password"/> <br/> <span id="span" style="color:red;"></span> <button type="submit">Submit</button> </form> </body> </html>Su secuencia de comandos debería ser algo como esto:
document.querySelector('form').addEventListener('submit', validate); function validate(event) { event.preventDefault(); const form = new FormData(event.target); const password = form.get('password').trim(); if (password.length < 8) { document.getElementById("span").innerHTML = "Password length must be more than 7 characters.<br/>" return; } event.target.submit(); }Puse .trim() porque suele ser una buena idea recortar las entradas. Considere esto si está utilizando los atributos en línea: "Puede encontrar equivalentes de atributos HTML para muchas de las propiedades del controlador de eventos; sin embargo, no debe usarlos, ya que se consideran una mala práctica. Puede parecer fácil usar un atributo del controlador de eventos si está haciendo algo realmente rápido, pero rápidamente se vuelven inmanejables e ineficientes ". Esto es de la documentación de mdn -> https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events
var ssn = document.getElementById("ssn"); var current = document.getElementById("current"); ssn.oninput = function(event) { current.textContent = ssn.value; } <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <form action=""> <label for="ssn">password:</label> <input type="password" id="ssn" inputmode="numeric" minlength="9" maxlength="12" pattern="(?!000)([0-6]\d{2}|7([0-6]\d|7[012]))([ -])?(?!00)\d\d\3(?!0000)\d{4}" required autocomplete="off"> <br> <label for="ssn">Value:</label> <span id="current"></span> <span id="span" style="color:red;"></span> <button onclick="validate()">Submit</button> </form> </body> </html>