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>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>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.