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.
JavaScript
x
48
48
1
<script>
2
3
function confirmarAlta(){
4
5
var result = confirm("Esta seguro que desea crear este usuario?");
6
7
if(result == false){
8
event.preventDefault();
9
}
10
}
11
12
</script>
13
14
<script>
15
function verificarPassword(){
16
var pass = document.querySelector(".password").value;
17
var confirmPass = document.querySelector(".confirmPassword").value;
18
console.log(pass);
19
console.log(confirmPass)
20
21
if(pass != confirmPass){
22
pass = "";
23
confirmPass = "";
24
alert("Las contraseñas no coinciden");
25
return
26
}
27
28
}
29
30
</script>
31
32
<script>
33
34
function Validaciones(event) {
35
if (verificarPassword() === true) {
36
confirmarAlta();
37
38
if(confirmarAlta()==false){
39
event.preventDefault();
40
}
41
42
} else {
43
event.preventDefault();
44
}
45
}
46
47
48
</script>
JavaScript
1
15
15
1
<form onSubmit="Validaciones(event)" method="post" action="ServletUsuarios">
2
<div class="form-group">
3
<label>Contraseña: </label>
4
<input type="password" class="form-control password" name="txtPassword" required>
5
</div>
6
<div class="form-group">
7
<label>Repetir Contraseña: </label>
8
<input type="password" class="form-control confirmPassword" name="txtConfirmarPassword" required>
9
</div>
10
11
<div class="col-12">
12
<input type="submit" class="btn btn-success" value="Aceptar" name="btnAceptar">
13
<button type="submit" class="btn btn-outline-info">Limpiar campos</button>
14
</div>
15
</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!
JavaScript
1
31
31
1
function confirmarAlta(event) {
2
var result = confirm("Esta seguro que desea crear este usuario?");
3
4
if (result === false) {
5
event.preventDefault();
6
}
7
}
8
9
function verificarPassword() {
10
var pass = document.querySelector(".password").value;
11
var confirmPass = document.querySelector(".confirmPassword").value;
12
console.log(pass);
13
console.log(confirmPass)
14
15
if (pass != confirmPass) {
16
pass = "";
17
confirmPass = "";
18
alert("Las contraseñas no coinciden");
19
return false
20
}
21
return true;
22
23
}
24
25
function Validaciones(event) {
26
if (verificarPassword() === true) {
27
confirmarAlta(event);
28
} else {
29
event.preventDefault();
30
}
31
}
JavaScript
1
15
15
1
<form onSubmit="Validaciones(event)">
2
<div class="form-group">
3
<label>Contraseña: </label>
4
<input type="password" class="form-control password" name="txtPassword" required>
5
</div>
6
<div class="form-group">
7
<label>Repetir Contraseña: </label>
8
<input type="password" class="form-control confirmPassword" name="txtConfirmarPassword" required>
9
</div>
10
11
<div class="col-12">
12
<input type="submit" class="btn btn-success" value="Aceptar" name="btnAceptar">
13
<button type="submit" class="btn btn-outline-info">Limpiar campos</button>
14
</div>
15
</form>