Solved

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

Posted on 2014-12-02
11
194 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
 

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
Find Ransomware Secrets With All-Source Analysis

Ransomware has become a major concern for organizations; its prevalence has grown due to past successes achieved by threat actors. While each ransomware variant is different, we’ve seen some common tactics and trends used among the authors of the malware.

 
LVL 82

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 82

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

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

747 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

Need Help in Real-Time?

Connect with top rated Experts

12 Experts available now in Live!

Get 1:1 Help Now