CODEWITHSUNDEEP
javascriptjqueryvalidationemail-validation
Tom
Tom

Reputation: 12998

Check for valid email before running remaining javascript

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 - " />

Upvotes: 9

Views: 19988

Answers (5)

Schroedingers Cat
Schroedingers Cat

Reputation: 3139

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

Upvotes: 0

Richard H
Richard H

Reputation: 39095

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?

Upvotes: 3

Gaurav Agrawal
Gaurav Agrawal

Reputation: 4431

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....

Upvotes: 0

olivieradam666
olivieradam666

Reputation: 4670

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?

Upvotes: 9

James Allardice
James Allardice

Reputation: 166021

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
}

Upvotes: 14

Related Questions