I have a form which shows an alert with a message when the two password input fields do not match but if they do match it shows a confirmation message before creating the user. The issue im having is that even if my confirmation function returns false which means that in the confirm message i selected cancel, my form is being submitted again.
<script> function confirmarAlta(){ var result = confirm("Esta seguro que desea crear este usuario?"); if(result == false){ event.preventDefault(); } } </script> <script> function verificarPassword(){ var pass = document.querySelector(".password").value; var confirmPass = document.querySelector(".confirmPassword").value; console.log(pass); console.log(confirmPass) if(pass != confirmPass){ pass = ""; confirmPass = ""; alert("Las contraseñas no coinciden"); return } } </script> <script> function Validaciones(event) { if (verificarPassword() === true) { confirmarAlta(); if(confirmarAlta()==false){ event.preventDefault(); } } else { event.preventDefault(); } } </script>
<form onSubmit="Validaciones(event)" method="post" action="ServletUsuarios"> <div class="form-group"> <label>Contraseña: </label> <input type="password" class="form-control password" name="txtPassword" required> </div> <div class="form-group"> <label>Repetir Contraseña: </label> <input type="password" class="form-control confirmPassword" name="txtConfirmarPassword" required> </div> <div class="col-12"> <input type="submit" class="btn btn-success" value="Aceptar" name="btnAceptar"> <button type="submit" class="btn btn-outline-info">Limpiar campos</button> </div> </form>
Advertisement
Answer
So I am guessing you wrapped the html provided inside a form, which is causing the submission, since input is of type submit
, I removed that and moved it to the onSubmit
event and called the event.preventDefault()
which will stop the fault form action, only when the validation alert opens!
function confirmarAlta(event) { var result = confirm("Esta seguro que desea crear este usuario?"); if (result === false) { event.preventDefault(); } } function verificarPassword() { var pass = document.querySelector(".password").value; var confirmPass = document.querySelector(".confirmPassword").value; console.log(pass); console.log(confirmPass) if (pass != confirmPass) { pass = ""; confirmPass = ""; alert("Las contraseñas no coinciden"); return false } return true; } function Validaciones(event) { if (verificarPassword() === true) { confirmarAlta(event); } else { event.preventDefault(); } }
<form onSubmit="Validaciones(event)"> <div class="form-group"> <label>Contraseña: </label> <input type="password" class="form-control password" name="txtPassword" required> </div> <div class="form-group"> <label>Repetir Contraseña: </label> <input type="password" class="form-control confirmPassword" name="txtConfirmarPassword" required> </div> <div class="col-12"> <input type="submit" class="btn btn-success" value="Aceptar" name="btnAceptar"> <button type="submit" class="btn btn-outline-info">Limpiar campos</button> </div> </form>