Javascript form Validation Error keeps saying emails do not match when they do

i have a simple contact form and i am trying to use javascript to validate it i have a email text box and a confirm email text box i need those two emails to mach when they don't mach it gives error message "Email does not mach" but it gives the same message even when they do mach Need help asap
mvp6648Asked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

GaryCommented:
Are we to guess based on your question of a few words?
Link to the page or at least the code.
0
mvp6648Author Commented:
hey sorry my computer ran out of battery as i was posting the question here is the HTML :

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>formvalidation</title>
<link href="vform.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="formvalidation2.js"></script>
</head>
<h1> Form Validation </h1>

<body>
    <form name="myForm" action="thanks.html"  method="post" onsubmit="return validateform()">
       <div>  
            <label for="Fname">First Name:</label>
            <input type="text" id="Fname" onKeypress="changeNormal(this)" placeholder="First Name">
           
            <label for="Sname">Second Name:</label>
            <input type="text" id="Sname" onKeypress="changeNormal(this)" placeholder="Second Name">
           
            <label for="email">Email:</label>
            <input type="text" id="email"  onBlur="changeNormal(this)" placeholder="Email">
           
            <label for="Cemail">Confirmation Email:</label>
            <input type="text" id="Cemail" onBlur="changeNormal(this)" placeholder="Confirmation Email">
           
            <label for="Addy">Address:</label>
            <textarea id="Addy" onKeypress="changeNormal(this)" placeholder="Address"></textarea>
           
            <label for="Tnumber">Phone Number:</label>
            <input type="text" id="Tnumber" onkeypress="changeNormal(this)" placeholder="Phone Number">
            <input id= "sub" type="submit" value="Submit" >
       </div>  
    </form>
</body>
</html

AND HERE IS THE JAVA


// JavaScript Document

function validateform()
{
      
//..................................FIRST NAME.........................................................................      
      var Fname = document.getElementById("Fname").value; //value from name box
      if (Fname == "") { // to see if name box is empty
            alert("First name must be filled out"); // if empty? alert user.
            document.getElementById("Fname").focus(); // send the focus on the box
            changeRed(this.Fname); // changes the box colour to red
            return false; // stops form-submit by returning false command to the form
      }
      
//.................................SECOND NAME.........................................................................      
      var Sname = document.getElementById("Sname").value; //value from name box
      if (Sname == "") { // to see if name box is empty
            alert("Second name must be filled out"); // if empty? alert user.
            document.getElementById("Sname").focus(); // send the focus on the box
            changeRed(this.Sname); // changes box colour to red
            return false; // stops form-submit by returning false command to the form
      }
//.................................EMAIL ADRESS........................................................................      
      var email = document.getElementById("email").value; //value from email box
      var Cemail = document.getElementById("Cemail").value; //value from Cemail box
      
      var atpos = email.indexOf("@"); //to find position of "@" sign in email
      var dotpos = email.lastIndexOf(".") //to find position of last "dot" in email
      
      if (email == "") { // same goes for email box
            alert("Email must be filled out");
            document.getElementById("email").focus();
            changeRed(this.email);
            return false;
      }
    if (email !== "Cemail")
       { // to make sure email address's match
            alert("Email address does not match");
            document.getElementById("Cemail").focus();
            changeRed(this.Cemail);
            return false;
      }
      
      
      if (atpos < 1 || (dotpos - atpos < 2)) {
            alert("Please enter correct email ID");
            document.getElementById("email").focus();
            return false;
      }
      
      
      
//................................CONFIRMATION EMAIL..............................      ...................................
      
      
//.................................ADDRESS.............................................................................      
      var Addy = document.getElementById("Addy").value; //value from address box
      if (Addy == "") { // same goes for Address box
            alert("Address must be filled out");
            document.getElementById("Addy").focus();
            changeRed(this.Addy);
          return false;
      }

//.................................TELEPHONE NUMBER....................................................................      
      var Tnumber = document.getElementById("Tnumber").value; //value from number box
      if (Tnumber == "") { // // same goes for telephone number box
            alert("Phone Number must be filled out");
            document.getElementById("Tnumber").focus();
            changeRed(this.Tnumber);
            return false;
      }

function changeRed(id) {
      id.style.background="red";
      id.style.color = "white";
    }

function changeNormal(id) {
      id.style.backgroundColor = "white";
      id.style.color = "black";
    }

}
0
GaryCommented:
You just have a misplace squiggly }

Before this line
function changeRed(id) {

add
}

In this block remove the indicated }
function changeNormal(id) {
       id.style.backgroundColor = "white";
       id.style.color = "black";
     }

 } <<< remove this

Open in new window


p.s.
In the future use the CODE tag, it's easier to read the code
Select all your code and click the Code menu item in the toolbar
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

mvp6648Author Commented:
ahhh i see thanks alot for your help  i made the changes but its not validating at all now I'm new to web development forgive me its just going strate to thanks.html after i click submit even though emails do not mach and so on
0
GaryCommented:
Here's your code with the corrections working as expected
http://jsfiddle.net/tyx7rpno/1/

Are you sure you made the correct changes and nothing else?
0
Dave BaldwinFixer of ProblemsCommented:
I made a few changes and This...
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>formvalidation</title>
<link href="vform.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="formvalidation2.js"></script>
</head>

<body>
<h1> Form Validation </h1>

    <form name="myForm" action="#"  method="post" onsubmit="return validateform()">
       <div>  
            <label for="Fname">First Name:</label>
            <input type="text" id="Fname" onKeypress="changeNormal(this)" placeholder="First Name"><br><br>
           
            <label for="Sname">Second Name:</label>
            <input type="text" id="Sname" onKeypress="changeNormal(this)" placeholder="Second Name"><br><br>
           
            <label for="email">Email:</label>
            <input type="text" id="email"  onBlur="changeNormal(this)" placeholder="Email"><br><br>
           
            <label for="Cemail">Confirmation Email:</label>
            <input type="text" id="Cemail" onBlur="changeNormal(this)" placeholder="Confirmation Email"><br><br>
           
            <label for="Addy">Address:</label>
            <textarea id="Addy" onKeypress="changeNormal(this)" placeholder="Address"></textarea><br><br>
           
            <label for="Tnumber">Phone Number:</label>
            <input type="text" id="Tnumber" onkeypress="changeNormal(this)" placeholder="Phone Number"><br><br>
            <input id="sub" type="submit" value="Submit" >
       </div>  
    </form>
</body>
</html

Open in new window

works with this...
// JavaScript Document

function validateform()
{
      
//..................................FIRST NAME..................................
      var Fname = document.getElementById("Fname").value; //value from name box
      if (Fname == "") { // to see if name box is empty
            alert("First name must be filled out"); // if empty? alert user.
            document.getElementById("Fname").focus(); // send the focus on the box
            changeRed(this.Fname); // changes the box colour to red
            return false; // stops form-submit by returning false command to the form
      }
      
//.................................SECOND NAME..................................
      var Sname = document.getElementById("Sname").value; //value from name box
      if (Sname == "") { // to see if name box is empty
            alert("Second name must be filled out"); // if empty? alert user.
            document.getElementById("Sname").focus(); // send the focus on the box
            changeRed(this.Sname); // changes box colour to red
            return false; // stops form-submit by returning false command to the form
      }
//.................................EMAIL ADRESS.................................
      var email = document.getElementById("email").value; //value from email box
      var Cemail = document.getElementById("Cemail").value; //value from Cemail box
      
      var atpos = email.indexOf("@"); //to find position of "@" sign in email
      var dotpos = email.lastIndexOf(".") //to find position of last "dot" in email
      
      if (email == "") { // same goes for email box
            alert("Email must be filled out");
            document.getElementById("email").focus();
            changeRed(this.email);
            return false;
      }
    if (email !== Cemail)
       { // to make sure email address's match
            alert("Email address does not match");
            document.getElementById("Cemail").focus();
            changeRed(this.Cemail);
            return false;
      }
      
      
      if (atpos < 1 || (dotpos - atpos < 2)) {
            alert("Please enter correct email ID");
            document.getElementById("email").focus();
            return false;
      }
      
      
      
//................................CONFIRMATION EMAIL............................
      
      
//.................................ADDRESS......................................
      var Addy = document.getElementById("Addy").value; //value from address box
      if (Addy == "") { // same goes for Address box
            alert("Address must be filled out");
            document.getElementById("Addy").focus();
            changeRed(this.Addy);
          return false;
      }

//.................................TELEPHONE NUMBER.............................
      var Tnumber = document.getElementById("Tnumber").value; //value from number box
      if (Tnumber == "") { // // same goes for telephone number box
            alert("Phone Number must be filled out");
            document.getElementById("Tnumber").focus();
            changeRed(this.Tnumber);
            return false;
      }
}

function changeRed(id) {
      id.style.background="red";
      id.style.color = "white";
    }

function changeNormal(id) {
      id.style.backgroundColor = "white";
      id.style.color = "black";
    }

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
mvp6648Author Commented:
yeah that works :) but there just one problem now its not taking me to the thanks.html page once the data has been submitted
0
mvp6648Author Commented:
oh wait i just changed the hash back to action="thanks.html" and it works perfect now thanks a lot i really apreciate your help can i just ask what changes you made that made it work ?
0
Dave BaldwinFixer of ProblemsCommented:
The two major changes were moving the '}' that I believe Gary mentioned and unquoting Cemail on one line where it was supposed to be the variable and not text.

I can only assume that 'thanks.html' is a temporary situation.  HTML can't send email.
0
mvp6648Author Commented:
because i was helped in some things but others i worked out myself witch i also shared those solutions on here
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.