Solved

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

Posted on 2014-12-02
11
218 Views
Last Modified: 2014-12-07
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
Comment
Question by:mvp6648
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 5
  • 3
  • 2
11 Comments
 
LVL 58

Assisted Solution

by:Gary
Gary earned 375 total points
ID: 40477615
Are we to guess based on your question of a few words?
Link to the page or at least the code.
0
 

Assisted Solution

by:mvp6648
mvp6648 earned 0 total points
ID: 40477619
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
 
LVL 58

Assisted Solution

by:Gary
Gary earned 375 total points
ID: 40477637
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
PeopleSoft Has Never Been Easier

PeopleSoft Adoption Made Smooth & Simple!

On-The-Job Training Is made Intuitive & Easy With WalkMe's On-Screen Guidance Tool.  Claim Your Free WalkMe Account Now

 

Assisted Solution

by:mvp6648
mvp6648 earned 0 total points
ID: 40477655
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
 
LVL 58

Assisted Solution

by:Gary
Gary earned 375 total points
ID: 40477658
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
 
LVL 83

Accepted Solution

by:
Dave Baldwin earned 125 total points
ID: 40477685
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
 

Assisted Solution

by:mvp6648
mvp6648 earned 0 total points
ID: 40477692
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
 

Assisted Solution

by:mvp6648
mvp6648 earned 0 total points
ID: 40477694
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
 
LVL 83

Expert Comment

by:Dave Baldwin
ID: 40477699
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
 

Author Closing Comment

by:mvp6648
ID: 40485304
because i was helped in some things but others i worked out myself witch i also shared those solutions on here
0

Featured Post

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article discusses how to create an extensible mechanism for linked drop downs.
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

734 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question