Tengo un formulario que muestra una alerta con un mensaje cuando los dos campos de entrada de contraseña no coinciden, pero si coinciden, muestra un mensaje de confirmación antes de crear el usuario. El problema que tengo es que incluso si mi función de confirmación devuelve falso, lo que significa que en el mensaje de confirmación seleccioné cancelar, mi formulario se envía nuevamente.
<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>Así que supongo que envolvió el html provisto dentro de un formulario, lo que está causando el envío, ya que la entrada es de tipo submit , lo eliminé y lo moví al evento onSubmit y llamé al event.preventDefault() que detendrá el formulario de falla acción, ¡solo cuando se abre la alerta de validación!
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>Intente usar una función de coincidencia o contiene una función para identificar si su pase y confirmPass devuelven verdadero o falso. También convierta esto a mayúsculas o minúsculas antes de la comparación. ¡Supongo que está volviendo verdadero siempre bajo pass! = confirmpass. Además, comparta lo que hay dentro del pase y confirme el pase antes de la condición.