Así que hice un código que lee el formulario de nombre y contraseña en html. En java script, hice un código para asegurarme de que los campos de nombre y contraseña estén completos. También registra que si el valor de la contraseña es menor o igual a 6, un mensaje mostraría "La contraseña debe tener más de 6 caracteres" y si la contraseña el valor es mayor o igual a 15, un mensaje mostraría "La contraseña debe tener menos de 15 caracteres" (extra: por cualquier motivo, cuando coloco una contraseña de 6 caracteres, mostraría ese mensaje a pesar del operador que incluí, lo mismo ocurre con el último) .
Aquí está el código HTML seguido de javascript:
<!--Error container--> <div id="error"></div> <!--Form--> <form id="form" action="/" method="GET"> <fieldset> <!--Legend--> <legend>Form: </legend> <!--Name--> <label for="name">Name:</label> <input type="text" name="Name" id="name"> <br><br> <!--Password--> <label>Password: </label> <input type="password" name="password" id="password"> <br><br> <!--Submit and Reset Button--> <input type="submit" Value="Submit"> <input type="reset" Value="Reset"> </fieldset> </form> <!--form-->[Texto de relleno: pensé que hice la pregunta tan simple y fácil de seguir como debe ser] Aquí está la parte de javascript. Las primeras cuatro líneas obtienen la identificación del código html que se dejó caer desde arriba y luego la magia sucede desde allí.
const name = document.getElementById('name') const password = document.getElementById('password') const form = document.getElementById('form') const errorElement = document.getElementById('error') form.addEventListener('submit', (e) =>{ let messages = [] if(name.value === '' || name.value == null){ messages.push("Name is required") } if(password.value.length <= 6){ messages.push("Password must be longer than 6 characters") } if(password.value.length >= 15){ messages.push("Password must be shorter than 15 characters") } if(messages.length > 0){ e.preventDefault() errorElement.innerText = messages.join(', ') } e.preventDefault() })Utilice Javascript y HTML. Gracias por usar su tiempo para leer y ayudar.
Tu formulario no se enviará porque estás impidiendo activamente que lo haga usando e.preventDefault()
Simplemente eliminaría eso o activaría una acción de envío a través de JavaScript si no se producen errores:
if (!messages) //the variable messages is empty, so there are no errors form.submit() //submit the formEsto también podría ayudarlo: ¿Cómo puedo enviar un formulario usando JavaScript?
Solo algunas cosas menores:
<= 6 es lo que hace que siga mostrando el mensaje de error cuando tiene exactamente 6 caracteres. Actualizarlo a < 6 solo mostrará el mensaje cuando la contraseña tenga menos de 6 caracteres (a diferencia de menos o igual que)e.preventDefault() , incluso fuera de la verificación de erroresmessages nunca se restablece, por lo que incluso una vez que el usuario ha corregido todos los errores, aún se impide que el formulario se envíeAquí hay una versión actualizada:
const name = document.getElementById('name') const password = document.getElementById('password') const form = document.getElementById('form') const errorElement = document.getElementById('error') form.addEventListener('submit', (e) =>{ let isValid = true; let messages = [] if(name.value === '' || name.value == null){ messages.push("Name is required"); isValid = false; } else if(password.value.length < 6){ messages.push("Password must be longer than 6 characters"); isValid = false; } else if (password.value.length >= 15){ messages.push("Password must be shorter than 15 characters"); isValid = false; } if(!isValid){ e.preventDefault() errorElement.innerText = messages.join(', ') } }) <!--Error container--> <div id="error"></div> <!--Form--> <form id="form" action="/" method="GET"> <fieldset> <!--Legend--> <legend>Form: </legend> <!--Name--> <label for="name">Name:</label> <input type="text" name="Name" id="name"> <br><br> <!--Password--> <label>Password: </label> <input type="password" name="password" id="password"> <br><br> <!--Submit and Reset Button--> <input type="submit" Value="Submit"> <input type="reset" Value="Reset"> </fieldset> </form> <!--form-->Nota al margen: en la vida real, nunca desea restringir la longitud de la contraseña de los usuarios. Que lo hagan tan fuerte como quieran. De todos modos, lo va a codificar, por lo que la longitud y los caracteres especiales no serán un problema para el almacenamiento.