Skip to content
Advertisement

How can i make to reenter my input fields and that my form do not submits?

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>
User contributions licensed under: CC BY-SA
3 People found this is helpful
Advertisement