Check for valid email before running remaining javascript

Question

I have a textbox where the user is required to insert a valid email address.

When the user submits a valid email address a loading graphic appears while the data is posted back.

The code below works fine for showing the loading graphic but it does not check that the email address is valid first. Can anyone help out?

$('#btnEmail1Submit').live ("click", function() {
   $('<div class="submitBg"></div>').appendTo(".emailEditContainer");
   $('<div class="submitLoadingCont"><img class="submitLoading" src="images/mypreferences/loading.gif" width="50" height="50" /></div>').appendTo(".emailEditContainer");
});

I am thinking that I need to put an if statement around the function that is run on click - so something like:

$('#btnEmail1Submit').live ("click", function() {
  if(emailvalid == true) {   
    $('<div class="submitBg"></div>').appendTo(".emailEditContainer");
    $('<div class="submitLoadingCont"><img class="submitLoading" src="images/mypreferences/loading.gif" width="50" height="50" /></div>').appendTo(".emailEditContainer");
  }
});

I am using asp.net email validation - it looks something like this:

<asp:RegularExpressionValidator Display="Dynamic" ValidationGroup="PrimarySubmit" ID="RegularExpressionValidator1" runat="server" ValidationExpression="\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*" ControlToValidate="tbEmail1" ErrorMessage="Invalid email address - " />

You have not shown us how you perform email address validation. — Lightness Races in Orbit, Jun 30 '11 at 10:25
you need to validate the email address using regular expression. Do this before calling the appendTo functions. — Hasan Fahim, Jun 30 '11 at 10:30

score 14 · Answer 1 · edited May 23 '17 at 12:24

You will need to use a regex to test the email address for validity:

function isValidEmailAddress(emailAddress) {
    var pattern = new RegExp(/^(("[\w-\s]+")|([\w-]+(?:\.[\w-]+)*)|("[\w-\s]+")([\w-]+(?:\.[\w-]+)*))(@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$)|(@\[?((25[0-5]\.|2[0-4][0-9]\.|1[0-9]{2}\.|[0-9]{1,2}\.))((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\.){2}(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\]?$)/i);
    return pattern.test(emailAddress);
};

That came from this question, so see that thread for more info.

You need to call that function with the email address provided by the user, so I'm assuming something like:

var email = $("#emailInput").val();
if(isValidEmailAddress(email)) {
    //Do stuff
}

score 9 · Accepted Answer · edited May 23 '17 at 11:53

9

You should check the email validity using a regexp

var re = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/

$('#btnEmail1Submit').live ("click", function() {
   if(!email.match(re)) {
     alert('invalid email');
     return false;
   }
   $('<div class="submitBg"></div>').appendTo(".emailEditContainer");
   $('<div class="submitLoadingCont"><img class="submitLoading" src="images/mypreferences/loading.gif" width="50" height="50" />    </div>').appendTo(".emailEditContainer");
});

The regexp comes from Validate email address in JavaScript?

edited May 23 '17 at 11:53

Community

1
1

answered Jun 30 '11 at 10:29

olivieradam666

4,522
2
20
25

Thanks... I think I had been in the right direction before I sought help - just needed to get the if statement correct. – Tom Jun 30 '11 at 10:43
`if(!email.match(re))` does not work, because if it does not find it, it will return null. So it should be `email.match(re) !== null` – Refilon Jun 22 '16 at 13:25

score 3 · Answer 3 · edited May 23 '17 at 11:46

3

Email validation has been discussed many, many times on SO, and elsewhere. In short it's hard (impossible) to do perfectly and is a trade off between maximising coverage of valid formats and minimising false positives. In fact all i do to validate email addresses is a basic sanity check. In pseudocode:

if (address.contains("@")) { 
   .. // then ok
}

Anything else is basically futile. Even if you spend ages constructing some insanely complex regex to comply with RFC822 to get most valid addresses (there are real addresses that don't comply with the RFC) - how do you know this inbox actually exists?

edited May 23 '17 at 11:46

Community

1
1

answered Jun 30 '11 at 10:29

Richard H

38,037
37
111
138

I know what you're saying Richard and totally agree. This check is mainly just to try to eliminate the chance that the user might have made a typo. It's not all that critical. – Tom Jun 30 '11 at 10:51
1

For those like me seeking the `contains` method, it's not native, you have to define it by hand, as described here: http://stackoverflow.com/a/1978419/1005455. – Laurent Couvidou Sep 04 '12 at 21:26

score 0 · Answer 4 · answered Jun 30 '11 at 10:31

0

you can check this

function myClick() {
    Page_ClientValidate();
    if (Page_IsValid) {
        return true;
    }
    else {
        return false;
    }
}

if you are using regularexpression validator then this can be used....

answered Jun 30 '11 at 10:31

Gaurav Agrawal

4,355
10
42
61

score 0 · Answer 5 · answered Jun 30 '11 at 10:39

If you need to execute the aps validator to validate the email address, which seems to be pertinant to your question, then you need to call the generated javascript that does this before you make the call - so call:

if(Page_ClientValidate)

do your other stuff

However, this will run all of the page validation, not just the email.

If you need to only run the one validation call for this, you can look at the generted javascript on your page, and find where it does the call for your email validation, and call that. However, I would not recommend that, as it may change when the page is regenerated.

See CodeProject

Check for valid email before running remaining javascript

5 Answers5

Linked