Escribí un Javascript para validar mis formularios antes de enviarlos. La función de Javascript es evitar que mi formulario se envíe solo cuando un usuario proporciona un número de teléfono que coincide con el resultado en mi Javascript, pero muestra un mensaje de error que dice "¡El número de teléfono ya se usó!"
Mi problema es que la validación funciona bien: los usuarios reciben una alerta de que se ha utilizado el número de teléfono que proporcionaron, pero mi formulario aún se envía solo después de mostrar el mensaje de error.
¿Qué no estoy haciendo bien?
A continuación se muestra mi código.
function check(form) /*function to check used phone number*/ { /*the following code checkes whether the entered phone number is matching*/ if (form.phonenum.value == "0807575566464" || form.phonenum.value == "09057487463") { alert("Phone number used! provide a new one! \n") /*displays error message*/ } else if (form.phonenum.value.length<11 || form.phonenum.value.length>11) { alert("Phone number should be 11 digits! \nAnd it should begin with; 080, 081, 070, 090, or 091."); } else { return false; } } <form action='' method='POST' enctype="multipart/form-data" id="formName"> <input type="text" id="phonenum" name="myinput"> <button href='/' type='submit' onclick="check(this.form)">Submit</button> </form>Debe vincular una función al evento onsubmit y detener el evento si falla la validación.
HTML:
<form action='' method='POST' enctype="multipart/form-data" id="formName" onsubmit="validateForm(event)">JavaScript:
function validateForm(event) { if(validation fails...) { event.preventDefault(); .... } }Documentación y ejemplos de la función preventDefault: https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault
En lugar de usar event.preventDefault(), también podría devolver falso:
https://stackoverflow.com/a/65538474/9441244
En su caso, su JavaScript debería verse así
HTML:
<form action='/test/' method='POST' enctype="multipart/form-data" id="formName" onsubmit="validateForm(event)"> <input type="text" id="phonenum" name="myinput"> <button href='/' type='submit'>Submit</button> </form>JavaScript:
function validateForm(event) { if (this.phonenum.value == "0807575566464" || this.phonenum.value == "09057487463") { event.preventDefault(); alert("Phone number used! provide a new one! \n"); } else if (this.phonenum.value.length != 11) { this.preventDefault(); alert("Phone number should be 11 digits! \nAnd it should begin with; 080, 081, 070, 090, or 091."); } }Creo que necesita agregar e.preventDefault() para que deje de recargar la página cuando presione enviar.