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 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Apr 2013
    Posts
    9
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Having some trouble with basic email validation

    I'm trying to validate the email and provide messages. It seems to work and then the page goes to a file not found page. Not sure how to fix this. I'm wondering if this has to do with conflicting Javascript in this page. Any help would be greatly appreciated or if you have a better way I should be validating the email on this page more efficiently.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    	"http:/www.w3.org/TR/xhtmll/DTD/xhtmll-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
    <head>
    
    
    
    <title>Profile Page</title>
    
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="description" content="Login.." />
    <meta name="keywords" content="Matthew Freeman, Login" />
    
    <style type="text/css">
    
    body { background-color: ##CCFFFF;
    	color: #000000;
    	line height: 200%;
    	font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;}
    
    label { padding-right: 5px; }
    
    form {
    width:450px;
    }
    
    
    
    </style>
    
    
    </head>
    
    <body>
    
    <script type='text/javascript'>
    function emailValidator(element, alertMsg){
        var emailvalid = /^(([^<>()[\]\\.,;:\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,}))$/;
        if(element.value.match(emailvalid))
        {
            alert("Email Accepted.");
            return true;
        }else{
            alert(alertMsg);
            element.focus();
            return false;
        }
    }
    </script>
    
    
    
    <h4 align="center"><a href="login.html">Home/Login</a>&nbsp;&#124;&nbsp;
    <a href="companyinfo.html">Company Information</a>&nbsp;&#124;&nbsp;
    User Profile</h4>
    
    
    
    <h1 align="center">Please Fill Out The Following Form To Become A Music Shop Member!</h1>
    
    
    <div align="center"><img src="sale.jpg" alt="image description" height="143" width="353"></img></div>
    
    <h3 align="center">Ensure All Fields Have Been Properly Filled Out</h3>
    
    
    <center><form name="myForm" action="demo_form.asp" onsubmit="return validateForm()" method="post">
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    &nbsp;&nbsp;
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    First Name: <input type="text" id="fname"/>
    <br></br>
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    &nbsp;&nbsp;
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    Last Name: <input type="text" id="lname"/>
    <br></br>
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    &nbsp;&nbsp;&nbsp;&nbsp;
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    Email: <input type="text" id="email"/>
    <br></br>
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    &nbsp;&nbsp;
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    Street Address: <input type="text" id="street"/>
    <br></br>
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    &nbsp;&nbsp;&nbsp;
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    City/Town: <input type="text" id="city" />
    <br></br>
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    &nbsp;
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    State: <input type="text" id="state" />
    <br></br>
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    Favorite Brand of Guitar: <input type="text" id="guitar"/>
    
    <select id = "mysel" onchange = "showtext()">
    <option value = "">Choose ...</option>
    <option value="Gibson">Gibson</option>
    <option value="Fender">Fender</option>
    <option value="Jackon">Jackson</option>
    <option value="Ibanez">Ibanez</option>
    <option value="ESP">ESP</option>
    <option value="Epiphone">Epiphone</option>
    <option value="PRS">PRS</option>
    <option value="G&amp;L">G&amp;L</option>
    <option value="Dean">Dean</option>
    <option value="Washburn">Washburn</option>
    <option value="BC Rich">BC Rich</option>
    </select> 
    
    <script type = "text/javascript">
    function showtext() {
    document.getElementById("guitar").value = document.getElementById("mysel").value;
    }
    </script>
    
    
    	
    	<div>
    	
    <p></p>
    
    		<input type="submit" value="Submit Form" onclick="emailValidator(document.getElementById('email'), 'Not a valid Email address')"
        />&nbsp;&nbsp;&nbsp;
    		<input type = "reset" value = "Reset Form" onclick="alert('Your information has been cleared')"/>&nbsp;&nbsp;&nbsp;
    
    		
    
    
    </div></form></center>
    
    
    
    <script type="text/javascript" language="JavaScript">
    document.forms['myForm'].elements['fname'].focus();
    </script>
    
    
    
    <br></br>
    
    
    <div align="center"><img src="member.jpg" alt="image description" height="143" width="353"></img></div>
    
    
    <h4 align="center"><small>Copyright &copy; Matthew D. Freeman. All Rights Reserved</small></h4>
    
    
    <center><h4><small><script type="text/javascript">
    document.write(Date());
    </script></small></h4></center>
    
    <h4 align="center"><a href="http://validator.w3.org/check?uri=referer"><img
          src="http://www.w3.org/Icons/valid-xhtml10" alt="Valid XHTML 1.0 Transitional" height="31" width="88" /></a></h4>
      
    
    </body>
    
    </html>

  • #2
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,730
    Thanks
    202
    Thanked 2,508 Times in 2,486 Posts
    Code:
    <center><form name="myForm" action="demo_form.asp" onsubmit="return validateForm()" method="post">
    Does demo_form.asp exist? I don't see any Javascript function validateForm(). And you have <input type="submit" value="Submit Form" onclick="emailValidator(document.getElementById('email'), 'Not a valid Email address')" /> attached to your submit button. No return.

    If you want to call two functions on form submit (both of which must return true) you must do

    <form name = "myform" action = "" onsubmit = "return (validateForm() && emailValidator(document.getElementById('email'), 'Not a valid Email address')">

    Assigning a name to a form is obsolete and deprecated in XHTML. Use an id instead. Use of the <center> tag is also obsolete and deprecated (not supported in HTML5), and you should use css for presentational aspects. All those &nbsps are not the way to do it. alerts are also obsolete - use DOM methods go display a message to your user. <script language="JavaScript"> is also long obsolete.


    Be aware that testing for an email address in the right format does not mean that it is actually correct. (xyz@gmial.com). And complex regexs may well reject what are in fact valid emails. It may be better to ask the user to enter his address twice and check that the two match. Then a simpler format check may suffice. For example:-

    Code:
    var is_valid_email = function(email) { return /^.+@.+\..+$/.test(email); }
    or (not using a regex)

    Code:
    function looksLikeMail(str) {
    var lastAtPos = str.lastIndexOf('@');
    var lastDotPos = str.lastIndexOf('.');
    return (lastAtPos < lastDotPos && lastAtPos > 0 && str.indexOf('@@') == -1 && lastDotPos > 2 && (str.length - lastDotPos) > 2);
    }

    These will catch the great majority of errors.

    And please be aware that 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. A proper name may only contain letters, hyphen, space and apostrophe.
    Numeric values, such as zip codes, phone numbers and dates, should be validated as such. Ditto email addresses. This topic has been covered many times before in this forum.

    Finally, why are you using XHML? As I say, the <center> element was deprecated in HTML 4.01, and is not supported in XHTML 1.0 Strict DTD.

    "It works for me" - Famous last words of inexperienced web-designer
    Last edited by Philip M; 04-18-2013 at 08:44 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.

  • #3
    New to the CF scene
    Join Date
    Apr 2013
    Posts
    9
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thanks for your help. I'm really just getting into web design and know little to no advanced subject matter. I did try the form code you gave me which did work and validate my email. Problem is I have 4 errors now when submitting this to http://validator.w3.org/
    The errors are:

    Line 38, Column 28: StartTag: invalid element name

    var emailvalid = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\"…

    Line 38, Column 53: StartTag: invalid element name

    …alid = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0…

    Line 68, Column 78: xmlParseEntityRef: no name

    …"" onsubmit = "return (validateForm() && emailValidator(document.getElementByI…

    Line 68, Column 79: xmlParseEntityRef: no name

    …" onsubmit = "return (validateForm() && emailValidator(document.getElementById…



    Could you just take a look at my code and see how to clean these up? I will work on the other suggestions you made after I'm error free.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    	"http:/www.w3.org/TR/xhtmll/DTD/xhtmll-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
    <head>
    
    
    
    <title>Profile Page</title>
    
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="description" content="Login.." />
    <meta name="keywords" content="Matthew Freeman, Login" />
    
    <style type="text/css">
    
    body { background-color: ##CCFFFF;
    	color: #000000;
    	line height: 200%;
    	font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;}
    
    label { padding-right: 5px; }
    
    form {
    width:450px;
    }
    
    
    
    </style>
    
    
    </head>
    
    <body>
    
    <script type='text/javascript'>
    function emailValidator(element, alertMsg){
        var emailvalid = /^(([^<>()[\]\\.,;:\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,}))$/;
        if(element.value.match(emailvalid))
        {
            alert("Email Accepted.");
            return true;
        }else{
            alert(alertMsg);
            element.focus();
            return false;
        }
    }
    </script>
    
    
    
    <h4 align="center"><a href="login.html">Home/Login</a>&nbsp;&#124;&nbsp;
    <a href="companyinfo.html">Company Information</a>&nbsp;&#124;&nbsp;
    User Profile</h4>
    
    
    
    <h1 align="center">Please Fill Out The Following Form To Become A Music Shop Member!</h1>
    
    
    <div align="center"><img src="sale.jpg" alt="image description" height="143" width="353"></img></div>
    
    <h3 align="center">Ensure All Fields Have Been Properly Filled Out</h3>
    
    
    
    <center><form name = "myform" action = "" onsubmit = "return (validateForm() && emailValidator(document.getElementById('email'), 'Not a valid Email address')">
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    &nbsp;&nbsp;
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    First Name: <input type="text" id="fname"/>
    <br></br>
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    &nbsp;&nbsp;
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    Last Name: <input type="text" id="lname"/>
    <br></br>
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    &nbsp;&nbsp;&nbsp;&nbsp;
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    Email: <input type="text" id="email"/>
    <br></br>
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    &nbsp;&nbsp;
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    Street Address: <input type="text" id="street"/>
    <br></br>
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    &nbsp;&nbsp;&nbsp;
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    City/Town: <input type="text" id="city" />
    <br></br>
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    &nbsp;
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    State: <input type="text" id="state" />
    <br></br>
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    Favorite Brand of Guitar: <input type="text" id="guitar"/>
    
    <select id = "mysel" onchange = "showtext()">
    <option value = "">Choose ...</option>
    <option value="Gibson">Gibson</option>
    <option value="Fender">Fender</option>
    <option value="Jackon">Jackson</option>
    <option value="Ibanez">Ibanez</option>
    <option value="ESP">ESP</option>
    <option value="Epiphone">Epiphone</option>
    <option value="PRS">PRS</option>
    <option value="G&amp;L">G&amp;L</option>
    <option value="Dean">Dean</option>
    <option value="Washburn">Washburn</option>
    <option value="BC Rich">BC Rich</option>
    </select> 
    
    <script type = "text/javascript">
    function showtext() {
    document.getElementById("guitar").value = document.getElementById("mysel").value;
    }
    </script>
    
    
    	
    	<div>
    	
    <p></p>
    
    		<input type="submit" value="Submit Form" onclick="emailValidator(document.getElementById('email'), 'Not a valid Email address')"
        />&nbsp;&nbsp;&nbsp;
    		<input type = "reset" value = "Reset Form" onclick="alert('Your information has been cleared')"/>&nbsp;&nbsp;&nbsp;
    
    		
    
    
    </div></form></center>
    
    
    
    <script type="text/javascript" language="JavaScript">
    document.forms['myForm'].elements['fname'].focus();
    </script>
    
    
    
    <br></br>
    
    
    <div align="center"><img src="member.jpg" alt="image description" height="143" width="353"></img></div>
    
    
    <h4 align="center"><small>Copyright &copy; Matthew D. Freeman. All Rights Reserved</small></h4>
    
    
    <center><h4><small><script type="text/javascript">
    document.write(Date());
    </script></small></h4></center>
    
    <h4 align="center"><a href="http://validator.w3.org/check?uri=referer"><img
          src="http://www.w3.org/Icons/valid-xhtml10" alt="Valid XHTML 1.0 Transitional" height="31" width="88" /></a></h4>
      
    
    </body>
    
    </html>

  • #4
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,730
    Thanks
    202
    Thanked 2,508 Times in 2,486 Posts
    One more time, why are you using XHML? I fear that the root problem is that you are trying to run before you can walk.
    Last edited by Philip M; 04-19-2013 at 07:50 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
    •