• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 239
  • Last Modified:

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
0
mvp6648
Asked:
mvp6648
  • 5
  • 3
  • 2
8 Solutions
 
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
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

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

Featured Post

Get expert help—faster!

Need expert help—fast? Use the Help Bell for personalized assistance getting answers to your important questions.

  • 5
  • 3
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now