I wrote this code for validate password and i need to show user two different alerts.

1. (pw.length < 8) when this condition executed "Password need minimum 8 characters"

2. (pw != cpw) "Passwords does not match"

I already tried all if statements but it not gonna help.

<script>
    function validatePassword(){
        
        var pw= document.getElementById("txtPassword").value;
        var cpw= document.getElementById("txtCPassword").value;

        if((pw.length < 8)||(pw != cpw))
            {
                alert("please enter the correct password")
                return false;
                Event.preventDefault();
            }
        return true;
    }
    
</script>

Does anyone know if something...

CodePudding user response：

Use a boolean and two if statements. Return the boolean at the end for true or false.

function validatePassword() {
  const pw = document.getElementById("txtPassword").value;
  const cpw = document.getElementById("txtCPassword").value;
  let isValid = true;

  if (pw.length < 8) {
    alert('Password is not long enough. Minimum length is 8 characters.');
    isValid = false;
  }

  if(pw !== cpw)) {
    alert('Passwords do not match'.);
    isValid = false;
  }

  return isValid;
}

Or have both messages in one alert using an array

function validatePassword() {
  const pw = document.getElementById("txtPassword").value;
  const cpw = document.getElementById("txtCPassword").value;
  const errors = [];

  if (pw.length < 8) {
    errors.push('Password is not long enough. Minimum length is 8 characters.');
  }

  if(pw !== cpw)) {
     errors.push('Passwords do not match.');
  }

  if (errors.length) {
    alert(errors.join('\n'));
    return false;
  }

  return true;
}

CodePudding user response：

You were using same id for both input, you should change that first, here is most basic version you can use this type of code.

function validatePassword(){
        var pw= document.getElementById("txtPassword1").value;
        var cpw= document.getElementById("txtCPassword2").value;

        if((pw.length < 8)||(cpw != pw))
            {
                alert("please enter the correct password")
                return false;
            }
        return true;
    }

<form id="form">
  <input type="text" id="txtPassword1">
  <input type="text" id="txtCPassword2">
  <input onclick="event.preventDefault();validatePassword()" type="submit" value="Submit">  
</form>

This will do.

CodePudding user response：

<script>
        var pw= document.getElementById("txtPassword").value;
        var cpw= document.getElementById("txtCPassword").value;
    function validatePassword(){
        


        if(pw.length < 8)
            {
                alert("Password need minimum 8 characters")
            }
        if(pw != cpw){
                alert("Passwords does not match")
            }

    }
    

CodePudding user response：

I don't think you need to show 2 alerts. When txtPassword is invalid, users have to retype both passwords whether passwords match or not. There is no point in showing "Passwords does not match" message in that case.

To know how to show 2 alerts, see my second code.

First, here is another solution:

const FORM = document.querySelector('#form');
const PSW = document.querySelector('#txtPassword');
const C_PSW = document.querySelector('#txtCPassword');

FORM.addEventListener('submit', event => {
    event.preventDefault();
    if (!validatePassword()) return;
    console.log('Submitted');
})

function validatePassword() {
    let pw = PSW.value;
  let cpw = C_PSW.value;
  
  if (pw.length < 8) {
    alert('please enter the correct password');
    return;
  } else if (pw !== cpw) {
    alert('Passwords does not match');
    return;
  }
  
  return true;
}

<form action="" id="form">
  <input type="password" id="txtPassword">
  <input type="password" id="txtCPassword">
  <input type="submit" value="Submit">  
</form>

To show 2 alerts:

function validatePassword() {
  let pw = PSW.value;
  let cpw = C_PSW.value;

  if (pw.length < 8) {
    alert('please enter the correct password');
    if (pw !== cpw) {
      alert('Passwords does not match');
    }
    return;
  } else if (pw !== cpw) {
    alert('Passwords does not match');
    return;
  }

  return true;
}