Soy relativamente nuevo en JS y mi objetivo es centrarme en el campo de entrada si hay un error (después de la validación) y me doy cuenta de que si escribo onsubmit=validateFunction() directamente en la etiqueta HTML para el formulario (supongo ) actualiza la página y no pone el foco en el campo de entrada como quería. Comparando esto con llamarlo en JS, por ejemplo, document.getElementById("myForm").onsubmit = validateFunction; Seré capaz de hacer que funcione como yo quería. No entiendo la diferencia entre los dos, ¿por qué uno (onSubmit en la etiqueta del formulario) actualiza la página (o simplemente no se enfoca en el campo de entrada) y el otro (llamar desde JS) funciona como yo quería? ?
Aquí hay un ejemplo para más aclaraciones sobre la pregunta: -
function validateFunction() { const name = document.getElementById("name"); if (name.length < 5) { alert("Not valid!"); name.focus(); name.select(); return false; } else { return true; } } <form id="myForm" action="" onsubmit="validateFunction();"> <label>Name: <input type="text" id="name"></label> <button type="submit">Submit</button> </form>en comparación con (obras):
<form id="myForm" action=""> <label>Name: <input type="text" id="name"></label> <button type="submit">Submit</button> </form> <script type = "text/javascript" > document.getElementById("myForm").onsubmit = validateFunction; </script>Si está utilizando el atributo onsubmit , debe devolver el valor devuelto por la función.
También debe verificar la longitud de la propiedad de value de entrada, no el elemento de entrada en sí.
function validateFunction() { const name = document.getElementById("name"); if (name.value.length < 5) { alert("Not valid!"); name.focus(); name.select(); return false; } else { return true; } } <form id="myForm" action="" onsubmit="return validateFunction()"> <label>Name: <input type="text" id="name"></label> <button type="submit">Submit</button> </form>