Is there a way to have a popup window for when emails do not match each other?

Question

I have my code set up to check if the two email addresses match. If they do not match, I would like the email boxes themselves to turn red or a pop window to come up saying your emails do not match and let them try again. I can not figure out how to do this. I have it checking the two emails, and if they do not match it refreshes, the whole page and puts the message on top of the screen.

Here is my code

<tr>
  <div class="form-group">
    <input required type="email" name="email" value="" class="form-control" placeholder="Email-address">
  </div>
  </tr>
  <tr>
  <div class="form-group">
    <input required type="email" name="email\\\_retype" value="" class="form-control" placeholder="Re-type Email-address">
  </div>
  </tr>

here is the code that checks if the emails match

if (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
        $error = 'The email address you entered is invalid, please try  again.';
        echo "<div class='page_old_full'>
        <p class='error'>ERROR: $error</p>
        </div>";
        break;
    }

    // checks if both emails are identical
    if ($email !== $email_retype) {
        $error = 'The two email addresses do not match. Please make sure they are the same.';
        echo "<div class='page_old_full'>
        <p class='error'>ERROR: $error</p>
        </div>";
        break;
       }

Why is there a `javascript` tag? Do you want to use it? Because in your example there in only php and html. — Mike B, Feb 27 '21 at 16:07
Yes, I would like to use javascript to do the popup window or red bar around the emails. I tried it in PHP and everyone said it is better to use javascript. — Brian N, Feb 27 '21 at 16:15

score 0 · Answer 1 · answered Feb 27 '21 at 16:32

We can edit those HTML elements to add listeners to them like this:

<input type="text" name="email" onkeyup="resetEmailCheck()">
<input type="text" name="email_retype" onkeyup="resetEmailCheck()">
<input type="submit" value="Submit" id="email_submit_btn" onclick="checkEmails()">

Then in the tag we have to check their value with Javascript

function checkEmails() {
    let em = document.querySelector('input[name="email"]')
    let em_re = document.querySelector('input[name="email_retype"]')
    if (em.value?.trim() != em_re.value?.trim()) {
        em.classList.add('bad-input')
        em_re.classList.add('bad-input')
    }
}
//when starts typing again - removes the bad class
function resetEmailCheck() {
    let em = document.querySelector('input[name="email"]')
    let em_re = document.querySelector('input[name="email_retype"]')
    em.classList.remove('bad-input')
    em_re.classList.remove('bad-input')
}

In the css i added a simple style of:

.bad-input {
    border: 1px solid red
}

The idea can be realised in many ways, but this could be the way to start.

Won't this check on every time a key is pressed? Wouldn't the user probably want something like [How to delay the .keyup() handler until the user stops typing?](https://stackoverflow.com/a/37494269/2430549)? — HoldOffHunger, Feb 27 '21 at 16:36
@HoldOffHunger nope. The onkeypress will only remove the border. Values are checked on the submit press — Mike B, Feb 27 '21 at 16:39

Is there a way to have a popup window for when emails do not match each other?

1 Answers1