Solved

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

Posted on 2014-12-02
11
209 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
  • 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
Active Directory Webinar

We all know we need to protect and secure our privileges, but where to start? Join Experts Exchange and ManageEngine on Tuesday, April 11, 2017 10:00 AM PDT to learn how to track and secure privileged users in Active Directory.

 

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

Active Directory Webinar

We all know we need to protect and secure our privileges, but where to start? Join Experts Exchange and ManageEngine on Tuesday, April 11, 2017 10:00 AM PDT to learn how to track and secure privileged users in Active Directory.

Question has a verified solution.

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

Suggested Solutions

This article discusses four methods for overlaying images in a container on a web page
Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

821 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