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

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 >
        <label>Contraseña: </label>
        <input type="password"  name="txtPassword" required>
      </div>
      <div >
        <label>Repetir Contraseña: </label>
        <input type="password"   name="txtConfirmarPassword" required>
      </div>

      <div >
        <input  type="submit"  value="Aceptar" name="btnAceptar">
        <button type="submit" >Limpiar campos</button>
    </div>
</form>

CodePudding user response：

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.

CodePudding user response：

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 >
    <label>Contraseña: </label>
    <input type="password"  name="txtPassword" required>
  </div>
  <div >
    <label>Repetir Contraseña: </label>
    <input type="password"  name="txtConfirmarPassword" required>
  </div>

  <div >
    <input type="submit"  value="Aceptar" name="btnAceptar">
    <button type="submit" >Limpiar campos</button>
  </div>
</form>