Email Validation in a Form

AndreaSunshine · October 7, 2013

Hi there!

I am using: a form in HTML, PHP and then I was trying to use Javascript to validate the email address before it was sent to the next PHP page.

The problem is... that even if the email is invalid and the javascript function displays an error message, the page >still< proceeds to the next PHP page (as if everything was fine).

However, I >want< it to stay on the same page and allow the user to enter in their email address again (correctly). And not advance to the next PHP page >until< the email address has been successfully validated.

Below is my HTML, PHP and Javascript.

Could anyone kindly tell me what I'm doing wrong? I'd really appreciate it!

Thank you very much!!

Andrea

================

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<HTML>

<HEAD>

<TITLE>Ballard Social</TITLE>

</HEAD>

<STRONG><font color="#4c4f4e" face="arial,verdana" size=2>Sign Up on the Email List</STRONG><BR>

<font size=1>You will be notified of the next Ballard Social event</font><BR>

</FORM>

</td></tr></table>

</BODY>

</HTML>

function pValidateForm()

{

var x=document.forms['myForm']['Email'].value;

var atpos=x.indexOf('@');

var dotpos=x.lastIndexOf('.');

if (atpos<1 || dotpos<atpos+2 || dotpos+2>=x.length)

{

alert('Not a valid e-mail address');

return false;

}

</script>

Psycho · October 7, 2013

Well, the first thing I thought was that you were not doing a "return false" to prevent the form from submitting. But, it seems you are. So the second thing to look for is some JavaScript erroring out. But, I don't see any obvious problems there. So, I went ahead and copied/pasted the code (as is) into a document and it worked perfectly. Page does not submit if there is an error in the email logic. I'm using FF, so the problem could be browser specific. You have the JavaScript code block after the HTML closing tag. I don't know if that is even valid markup (I'm thinking not). Try moving that code block within the HTML tags, preferably within the HEAD tags.

EDIT: I just took a closer look at that code and - where are you learning to code? FONT tags, really? Those have been deprecated for over a decade. Also, your process for validating the email is pretty worthless since it only validates the content has an "@" and a "." and that the period comes after.

Edited October 7, 2013 by Psycho

Psycho · October 7, 2013

OK, this may not fix your problem, but at least you would be starting from a much cleaner bit of code. As before, this does work for me - both in FF & IE. If there is an error the page does not submit.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Ballard Social</title>
<meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">
<style>
body {
    background-color: #ddeae7;
}

#signUpFormTable{
    border: 1px solid #bfc2c1;
    padding: 10px;
    margin: auto;
    margin-top: 100px;
    background: #ffffff;
    width: 355px;
    text-align: center;
}

#formTitle{
    color: #4c4f4e;
    font: bold 16px arial, verdana, serif;
}

#formText{
    font-size: 12px;
}

</style>
<script type='text/javascript'>

function validEmail(emailStr)
{
    //Return true/false for valid/invalid email
    formatTest = /^[\w!#$%&\'*+\-\/=?^`{|}~]+(\.[\w!#$%&\'*+\-\/=?^`{|}~]+)*@[a-z\d]([a-z\d-]{0,62}[a-z\d])?(\.[a-z\d]([a-z\d-]{0,62}[a-z\d])?)*\.[a-z]{2,6}$/i
    lengthTest = /^(.{1,64})@(.{4,255})$/
    return (formatTest.test(emailStr) && lengthTest.test(emailStr));
}

function pValidateForm()
{
    var emailVal = document.getElementById('email').value;
    if(!validEmail(emailVal))
    {
        alert('Not a valid e-mail address');
        return false;
    }
    return true;
}
 
</script>
</head>
 
<body>

<div id="signUpFormTable">
    <form onsubmit='return pValidateForm()' action="pAddEmail_BallardSocial_1_validate.php" method="post" name='myForm' id='myForm'>
        <span id="formTitle">Sign Up on the Email List</span><br>
        <span id="formText">You will be notified of the next Ballard Social event</span><br>
        <input type="Hidden" name="SourcePage" value="SignUp.htm">
        <input name="Email" id="email" type="text" size="28" placeholder="enter your email address">                              
        <input name="OK2" type="submit" value="OK">
    </form>
</div>

</body>
</HTML>

AndreaSunshine · October 8, 2013

Thank you for the "cleaner" code. I will try it! Thanks for taking the time to write it out for me!

To the main issue, it still doesn't work.

It wants to move to the next page >even< when it returns a "false" value. The error message will appear but as when the user clicks "ok," it automatically takes them to the next page (pAddEmail_BallardSocial_1_validate.php). What it >should< do is stay there and let them re-enter their email address with a valid format. Then test it and if it's valid, then take them to the next page.

Hope that makes sense!

Andrea

Psycho · October 8, 2013

Yes, it makes sense. And, as I stated, I tested the code in both IE and Chrome and found it to be working. So, my guess is the problem is due to the browser you are using or you are implementing other code along with this that is not provided.

Sign In

Email Validation in a Form

Recommended Posts

AndreaSunshine

Link to comment

Share on other sites

Psycho

Link to comment

Share on other sites

Psycho

Link to comment

Share on other sites

AndreaSunshine

Link to comment

Share on other sites

Psycho

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information