Another Password Confirmation

[jPaulB]

Hi Everybody,

I've built a New-Registration form that will ask a visitor to input their password PW1 and then confirm that password in a second <input type ="password"> PW2.

Once the visitor enters the confirmation, I would want my system to automatically/immediatley verify if PW1 is equal to PW2, or not.

• If the two are equal, then I want to store one of the results in a third password variable and move on with the rest of the form.

Here is my mental-block:

• If the two submissions are NOT equal, then I want to clear the contents of both PW1 and PW2 and then place the cursor back in the PW1 Input-field.

The code I have for this part of the form is as follow:

<div class="row">
    <div class="col-sm-6 form-group">
        <div class="input-group">
            <span class="input-group-text"><i class="bi-key-fill" arial-hidden="true"></i>&nbsp;</span>
            <input type="password" class="form-control" placeholder="Enter Your Password" id="PW1" name="PW1" required="required">
        </div>
    </div>
    <div class="col-sm-6 form-group">
        <div class="input-group">
            <span class="input-group-text"><i class="bi-key-fill" arial-hidden="true"></i>&nbsp;</span>
            <input type="password" class="form-control" placeholder="Enter Your Password Again to Confirm" id="PW2" name="PW2" required="required"><br>
        </div>
    </div>
</div>
<!--Insert a script to evaluate "what to do" if PW1 is equal/unequal to PW2-->
<script>
    I have no idea how to plan or execute this snippet
</script>
<br>

 

[VBService]

if the two are equal, then I want to store one of the results in a third password variable

you don't need a third variable, use for example a variable called flag witch is type boolean to keep status of passwords equality.

<div class="row">
  <div class="col-sm-6 form-group">
    <div class="input-group">
      <span class="input-group-text"><i class="bi-key-fill" arial-hidden="true"></i>&nbsp;</span>
      <input type="password" class="form-control" placeholder="Enter Your Password" id="PW1" name="PW1" required="required">
    </div>
  </div>
  <div class="col-sm-6 form-group">
    <div class="input-group">
      <span class="input-group-text"><i class="bi-key-fill" arial-hidden="true"></i>&nbsp;</span>
      <input type="password" class="form-control" placeholder="Enter Your Password Again to Confirm" id="PW2" name="PW2" required="required"><br>
    </div>
  </div>
</div>
<!--Insert a script to evaluate "what to do" if PW1 is equal/unequal to PW2-->
<script>
  // Find input elements with the ID (PW1, PW2)
  const pw1 = document.querySelector('#PW1'),
        pw2 = document.querySelector('#PW2');
  let isPasswordsMatch = false; // variable called flag
  // Use for both event: input
  pw1.addEventListener('input', checkPasswordEquality);
  pw2.addEventListener('input', checkPasswordEquality);

  function checkPasswordEquality() {
    // Remove leading and trailing whitespace from the password values
    const password1 = pw1.value.trim();
    const password2 = pw2.value.trim();

    if (password1.length && password2.length) {
      if (password1 === password2) {
        // Passwords are the same
        pw2.style.backgroundColor = 'rgba(0, 255, 0, .5)';
        isPasswordsMatch = true;
      } else {
        // Passwords are different
        pw2.style.backgroundColor = 'rgba(255, 0, 0, .5)';
        isPasswordsMatch = false;
      }
    } else {
      pw2.style.backgroundColor = '';
      pw2.value = '';
      isPasswordsMatch = false;
    }
  }
</script>
<br>

[ Which variables can be referred to as flag variables? ]
[ Naming guidelines for boolean variables ]

you need to keep both values in the input elements (type=password) PW1 and PW2 to check the value again in the backend (in this case: php). Never trust frontend values because they may contain false data (by e.g. using DevTools from the browser). We only use JavaScript for first validation to help users navigate the form easily or for the reason BigDaddy described ...

"Never send things to the server that will come back, test them with JavaScript (the savior of extra web traffic)

 

[jPaulB]

Thank you, VBService:
That script does exactly what I wanted it to. I don't understand the execution (yet!) but will de-construct it carefully.

• An additional question though: You mention the script as a first validation, and that a second validation (using PHP) is necessary. How would that function?

As always, my thanks to both BigDady and VBService for the time you have both given to me. I always think my brain isn't big enough to follow your thoughts, but it is sure rewarding.