我怎样才能重新输入我的输入字段并且我的表单不提交？

Question

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>

Answer 1

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>

Answer 2

Try using a match function or contains function to identify if your pass and confirmPass return true or false. Also convert this to toUpper case or toLower case before comparison. I guess it is returning true always under pass != confirmpass. Also, please share what is inside pass and confirmpass before if condition.