How to get rid of error message once correct email address entered in form?

Question

Using jQuery, how do I get the isValidEmailAddress error message below ("Please enter a valid email address") to disappear once a correct email address is entered? Currently when I click submit having re-entered the email address, and get the alert saying "Your message has been successfully sent!", the error message stays on the page.

$("#validationForm").submit(function(event){

        var errorMessage="";

        event.preventDefault();

        function isValidEmailAddress(emailAddress) {
        var pattern = new 
        RegExp(/^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?$/i);
        return pattern.test(emailAddress);
        };

            /* Regex validation of email address */

        if (!isValidEmailAddress($("#email").val())) {
            errorMessage="*Please enter a valid email address*";}


        if (errorMessage==""){
        alert("Your message has been successfully sent!");} else {
        $("#error").html(errorMessage);}


        });

T.J. Crowder · Accepted Answer · 2015-08-02T12:33:47.510

The same way you put it there, right next to your alert:

if (errorMessage==""){
$("#error").html("");
alert("Your message has been successfully sent!");} else {
$("#error").html(errorMessage);}

or simply

$("#error").html(errorMessage);
if (errorMessage==""){
alert("Your message has been successfully sent!");}

...since errorMessage has "" in it already.

Example:

Here's your original:

$("#validationForm").submit(function(event) {

    var errorMessage = "";

    event.preventDefault();

    function isValidEmailAddress(emailAddress) {
        var pattern = new
        RegExp(/^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?$/i);
        return pattern.test(emailAddress);
    };

    /* Regex validation of email address */

    if (!isValidEmailAddress($("#email").val())) {
        errorMessage = "*Please enter a valid email address*";
    }


    if (errorMessage == "") {
        alert("Your message has been successfully sent!");
    } else {
        $("#error").html(errorMessage);
    }


});

<p>Your original code</p>
<form id="validationForm">
  <div><input type="text" id="email"></div>
  <div id="error"></div>
  <input type="submit" value="Send">
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

Here's the updated version:

$("#validationForm").submit(function(event) {

    var errorMessage = "";

    event.preventDefault();

    function isValidEmailAddress(emailAddress) {
        var pattern = new
        RegExp(/^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?$/i);
        return pattern.test(emailAddress);
    };

    /* Regex validation of email address */

    if (!isValidEmailAddress($("#email").val())) {
        errorMessage = "*Please enter a valid email address*";
    }


    $("#error").html(errorMessage);
    if (errorMessage == "") {
        alert("Your message has been successfully sent!");
    }


});

<p>Your original code</p>
<form id="validationForm">
  <div><input type="text" id="email"></div>
  <div id="error"></div>
  <input type="submit" value="Send">
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

It's purely a style thing, but can I strongly urge you to use any of the several vaguely-common bracing and indentation styles instead of hiding the ending } on the last line of the block and not indenting when you've made something conditional? That style is incredibly error-prone.

Here's the simple version above in the most common bracing and indentation style:

$("#error").html(errorMessage);
if (errorMessage=="") {
    alert("Your message has been successfully sent!");
}

Here's the longer version with the else in that same style::

if (errorMessage=="") {
    $("#error").html("");
    alert("Your message has been successfully sent!");
} else {
    $("#error").html(errorMessage);
}

or sometimes you see else starting a new line:

if (errorMessage=="") {
    $("#error").html("");
    alert("Your message has been successfully sent!");
}
else {
    $("#error").html(errorMessage);
}

or another common (though much less common) one:

if (errorMessage=="")
{
    $("#error").html("");
    alert("Your message has been successfully sent!");
}
else
{
    $("#error").html(errorMessage);
}

Similarly, spaces around binary and ternary operators aid readability:

if (errorMessage == "")
//              ^  ^

@JonnyBoy: I've added live examples demonstrating your old code not removing the error, and the new code removing it. — T.J. Crowder, Aug 02 '15 at 12:34

score 1 · Answer 2 · edited May 23 '17 at 12:06

1

Consider using HTML5 input email type to avoid some or all of the js

HTML5 Email Validation

edited May 23 '17 at 12:06

Community

1
1

answered Aug 02 '15 at 11:31

Michael Durrant

93,410
97
333
497

This is more of a comment than answer. – T.J. Crowder Aug 02 '15 at 11:32
Well it's certainly terse but I do consider it an answer, though a different approach, to the bigger problem the user is trying to solve. – Michael Durrant Aug 02 '15 at 14:27

How to get rid of error message once correct email address entered in form?

2 Answers2