Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 10 of 10
  1. #1
    New to the CF scene
    Join Date
    Oct 2012
    Posts
    8
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Email validation help.

    Can someone please make the code below check for simple formatting of x@x.x before validating. I've tried numerous times and can't get it right.
    Thank you!

    if (form1.email.value == "") {
    alert( "Click OK and enter your E-Mail Address." );
    form1.email.focus();
    return false ;
    }

  • #2
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,928
    Thanks
    203
    Thanked 2,531 Times in 2,509 Posts
    Form validation of the pattern if (document.formname.formfield.value == "") - that is blank - is barely worthy of the name, and virtually useless, as even a single space, an X or a ? will return false, that is pass the validation. Of course, that applies to email addresses. A much more sophisticated validation is required. This topic has been covered many times before in this forum.

    Code:
    var em = document.form1.email.value;
    if (!(/^([a-z0-9])([\w\.\-\+])+([a-z0-9])\@((\w)([\w\-]?)+\.)+([a-z]{2,4})$/i.test(em))) {  
    alert ("Please enter a valid email address");
    document.form1.email.value = "";
    document.form1.email.focus();
    return false;
    }
    Having said that, one of the most effective email validations is to get the user to enter the address twice. If the two match is it assumed that the email is correct. The regex above checks the pattern of a valid email address, but obviously cannot detect mis-spellings such as me@gmial.com. Using both techniques gives maximum coverage.


    Quizmaster: On what part of the body is a lobotomy performed?
    Contestant: The bottom.
    Last edited by Philip M; 10-13-2012 at 08:55 PM.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • Users who have thanked Philip M for this post:

    ronh100 (10-14-2012)

  • #3
    New to the CF scene
    Join Date
    Oct 2012
    Posts
    8
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thanks Phillip M,

    As you can tell, I'm a newbie. I'll look for the thread to show me how to code the enter twice validation method. If you have a link to that thread you could give me, I would appreciate it.

    Thanks for your help!

  • #4
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,928
    Thanks
    203
    Thanked 2,531 Times in 2,509 Posts
    Quote Originally Posted by ronh100 View Post
    Thanks Phillip M,

    As you can tell, I'm a newbie. I'll look for the thread to show me how to code the enter twice validation method. If you have a link to that thread you could give me, I would appreciate it.

    Thanks for your help!

    Code:
    Enter your email address <input type = "text" id = "em1" size = "50">
    <br>
    Confirm your email address <input type = "text" id = "em2" size = "50" onpaste = "detectPaste()">
    
    
    <script type = "text/javascript">
    
    // include in form validation script
    
    // check for valid email adddress
    var em = document.getElementById("em1").value;
    if (!(/^([a-z0-9])([\w\.\-\+])+([a-z0-9])\@((\w)([\w\-]?)+\.)+([a-z]{2,4})$/i.test(em))) {  
    alert ("The address you have entered is not valid - Please enter a valid email address");
    document.getElementById("em1").value = "";
    document.getElementById("em2").value = "";
    document.getElementById("em1").focus();
    return false;
    }
    
    //check that the two (proved valid) email addresses match
    var e1 = document.getElementById("em1").value;
    var e2 = document.getElementById("em2").value;
    if (e1 != e2) {
    alert ("The two email addresses you have entered do not match.  Please re-enter them");
    document.getElementById("em1").value = "";
    document.getElementById("em2").value = "";
    document.getElementById("em1").focus();
    return false
    }
    
    function detectPaste(){
    //document.getElementById('em2').value="Naughty boy!";  
    alert ("You have pasted the confirmation of your email address text  - please re-type it");
    setTimeout(erase,10);
    }
    
    function erase(){
    document.getElementById('em2').value="";  
    }
    
    
    </script>
    Bookshop Assistant: "This book about Javascript will save you half your work".
    Lazy Student: "Oh good! I'll take two!"
    Last edited by Philip M; 10-15-2012 at 07:42 AM. Reason: Add detect paste.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #5
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,634
    Thanks
    0
    Thanked 649 Times in 639 Posts
    Quote Originally Posted by Philip M View Post
    Having said that, one of the most effective email validations is to get the user to enter the address twice.
    That is actually one of the most useless and annoying non-validations that you can use.

    For passwords it makes sense to require that it be entered twice as you can't see what you have typed in order to correct any typos. That doesn't apply for email addresses where most people if asked to enter it twice would simply copy the content of the first field and paste it into the second - thus the presence of the field provides proof of the person's ability to copy and paste regardless of whether the email address that they originally entered was correct or not.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #6
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,928
    Thanks
    203
    Thanked 2,531 Times in 2,509 Posts
    Quote Originally Posted by felgall View Post
    That is actually one of the most useless and annoying non-validations that you can use.

    For passwords it makes sense to require that it be entered twice as you can't see what you have typed in order to correct any typos. That doesn't apply for email addresses where most people if asked to enter it twice would simply copy the content of the first field and paste it into the second - thus the presence of the field provides proof of the person's ability to copy and paste regardless of whether the email address that they originally entered was correct or not.
    That is a very good point. So prevent paste into the field:-

    Code:
    <input id="one" size = "40" value = "myemail@nowherre.com"><br>
    <input id="two" size = "40" onpaste="detectPaste()">
    
    <script type = "text/javascript">
    
    function detectPaste(){
    document.getElementById('two').value="Naughty boy!";  
    alert ("You have pasted text into this document");
    setTimeout(erase,10);
    }
    
    function erase(){
    document.getElementById('two').value="";  
    }
    
    </script>
    That works in all modern browsers. It does not work if Javascript is disabled - but neither does any of the other validations.
    I have added the script to Post #4.
    Last edited by Philip M; 10-15-2012 at 07:39 AM.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #7
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,634
    Thanks
    0
    Thanked 649 Times in 639 Posts
    You still haven't explaied how entering the same garbage email address twice somehow makes the email address valid. I could enter goaway@felgall.com in both fields and have it accepted even though there is no such email address - not that I'd bother since I generally leave any site stupid enough to ask for an email address to be entered a second time without bothering to enter any email address at all. If you are going to ask for email address twice then why not ask for all the other fields twice as well just to make sure that the person gets lots of typing practice.

    The only way to actually validate an email address is to send an email to the address that contains a specially coded link. When the person received the email and clicks on the link the web page that loads then updates a flag on the record to indicate that the email is valid.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #8
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,928
    Thanks
    203
    Thanked 2,531 Times in 2,509 Posts
    Quote Originally Posted by felgall View Post
    You still haven't explaied how entering the same garbage email address twice somehow makes the email address valid. I could enter goaway@felgall.com in both fields and have it accepted even though there is no such email address - not that I'd bother since I generally leave any site stupid enough to ask for an email address to be entered a second time without bothering to enter any email address at all. If you are going to ask for email address twice then why not ask for all the other fields twice as well just to make sure that the person gets lots of typing practice.

    The only way to actually validate an email address is to send an email to the address that contains a specially coded link. When the person received the email and clicks on the link the web page that loads then updates a flag on the record to indicate that the email is valid.
    Entering the email address twice (by typing) reduces (but does not totally eliminate) the risk that the address contains a typing error such as two characters accidentally transposed. A regex which validates a pattern will not detect that mistake. Obviously if the user insists on entering garbage then nothing can be done to prevent that. In most situations the user has a motivation to get his email address right as he expects some sort of response, such as an order acknowledgement. So he would probaly welcome advice that his address was mis-typed.

    If you are so fastidious (precious?) that you feel that you must leave any site that requires you to enter your email adddress twice, then naturally you are unable to take advantage of whatever that site potentially has to offer. So it is your loss as well. Something about cutting off one's nose to spite one's face comes to mind.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #9
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,634
    Thanks
    0
    Thanked 649 Times in 639 Posts
    Quote Originally Posted by Philip M View Post
    If you are so fastidious (precious?) that you feel that you must leave any site that requires you to enter your email adddress twice, then naturally you are unable to take advantage of whatever that site potentially has to offer. So it is your loss as well. Something about cutting off one's nose to spite one's face comes to mind.
    Not really. Most browsers can remember your email address for you and fill it in automatically so that is the field leasy likely to contain typos in the first place.

    For every site silly enough to ask you to enter a field twice just in case you make a typo the first time and are too blind to be able to go back and fix it, there are usually at least ten other sites offering the same thing that don't assume that you are too blind to correct your own typos. I'd far rather deal with one of those ten sites than with the one that stupidly assumes that my browser has misremembered my email address.

    It makes more sense to ask someone to enter their name twice in case they mistype it than asking their browser to fill in their email address twice.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #10
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,928
    Thanks
    203
    Thanked 2,531 Times in 2,509 Posts
    Quote Originally Posted by felgall View Post
    there are usually at least ten other sites offering the same thing that don't assume that you are too blind to correct your own typos.
    Really?
    How many million times have I told you not to exaggerate and spoil your arguments with silly statements?

    I am sorely tempted to say that if you chose your e-commerce suppliers on such specious and tenuous grounds then you may perhaps be the sort of customer who they would prefer to do without.
    Last edited by Philip M; 10-16-2012 at 08:57 AM.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •