Question

I feel like I’m missing something small, but I can’t seem to make this work. I am validating a form where a user is allowed to change their email, and among other things want to confirm that they have not re-entered the same email that they already have.

I’ve played around a lot trying to pull the value of the p with id=”originalemail”, but I can’t seem to get it in a form that, when compared to the value entered, reflects that the strings are identical. Any help would be hugely appreciated.

For the sake of simplicity, I’ve trimmed the function to only validate based on whether or not the entered new email matches the currently existing (original) email:

JS/jquery:

<script>
function validateEmailChange()
{
    // set comparison
    var originalemail=document.getElementById("originalemail").innerHTML;
    var newemail=document.forms["emailform"]["emailnewemail"].value;

    if (newemail == originalemail)
    {
        $('#emailnewemailoff').html("Same as current email address");
        $('#emailconfirmationoff').html("");
        return false;
    }
</script>

HTML:

// show the user's current email
<p id="originalemail"><?= htmlspecialchars($user[0]["email"]) ?></p>

<form id="emailform" name="emailform" onsubmit="return validateEmailChange()" 
              action="email.php" method="post">

<input id="emailnewemail" name="emailnewemail" placeholder="New Email" type="text"/>
<input type="submit" value="Change Email" class="btn"/>

Thanks so much!

Answer 1

I created jQuery that evaluates when the user moves off the email input field ($('#emailnewemail').blur(), and it compares the values case-insensitive (.toLowerCase()) too, so that ‘[e-mail]’ is recognized to be the same as ‘[e-mail]’.

$('#emailnewemail').blur(function() {
    if ($('#originalemail').text().toLowerCase() === $('#emailnewemail').val().toLowerCase()) {
        $('#emailnewemailoff').html("Same as current email address");
        $('#emailconfirmationoff').html("");
        return false;
    } else {
        $('#emailnewemailoff').html("Not the same email address");
    }
});

See http://fiddle.jshell.net/jhfrench/EZp6R/ for a working example.