My web page is not running my JavaScript validation code

Question

Okay, so I have the form set to my PHP page. I also have the submit button onsubmit set to my validation javascript. What happens is that it goes directly to my php page and does not validate the input? What am I missing? Do I have this set up right? If I remove the php file from the form the javascript validate works fine. It is trying to use the php and javascript together that drives me insane.

      <html xmlns="http://www.w3.org/1999/xhtml" >
      <head>
      <link rel="stylesheet" type="text/css" href="styles/styles_Final.css"/> 
      <title>contact.html</title>   
         <script type= "text/javascript" src = "scripts/validator.js"></script> 

      </head> 

      <div id="right-cont">

        <form name = "contact_Us" action="http://nova.umuc.edu/cgi-bin/cgiwrap/ct386a28/eContact.php" method = "post"> 

            <div id="style2">
                <p>Please enter contact information below:</p>                                 
            </div>

            <div class="style7">
                <label>First Name: </label>
                &nbsp;<br /><input type="text" name = "firstName" id="firstName" tabindex="1" 
                    style="width: 176px" />
            </div>  

            <div class="style7">
                <label>Middle Name: </label>
                &nbsp;<br /><input type="text" name = "middleName" id ="middleName" tabindex="2" 
                    style="width: 176px" />
            </div>

            <div class="style7">
                <label>Last Name: </label>
                &nbsp;<br /><input type="text" name = "lastName" id ="lastName" tabindex="3" 
                    style="width: 176px" />
            </div>         

              <div class="style8">
                <label>Questions and/or comments: </label>
                &nbsp;<br /> <textarea name = "comment" id = "comment" rows = "10" cols = "60"></textarea>
              </div>             

          <div class =" buttons">
            <input type="submit" value="SUBMIT" onclick = "return validate()"/><input type="reset" value="CLEAR"/> <br />                
          </div> 
          </div>              
       </form>
   </div>

**************JAVASCRIPT**************************

   function validate() {
   //create references
   var fName;
   var mName;
   var lName;
   var email;
   var phone;

   fName = document.getElementById('firstName').value;  
       mName = document.getElementById('middleName').value;  
       lName = document.getElementById('lastName').value;  
       email = document.getElementById('email').value;  

       //validate the phone number     
       phone = document.getElementById('phone').value; 
       var boolean = isPhoneNumber(phone);

       if (!boolean)
       {
           alert("Please enter valid phone number format: ddd-ddd-dddd.");
           return false;
       }  

       //validate the email address
       email_Val()

       //validate the first name
       var fN=document.forms["contact_Us"]["firstName"].value
       if (fN==null || fN=="")
       {
          alert("Please fill in first name.");
          return false;
       }

       //validate the last name
       var lN=document.forms["contact_Us"]["lastName"].value
       if (lN==null || lN=="")
       {
       alert("Please fill in last name.");
       return false;
       }


   }

   function isPhoneNumber(phone)
   {
       var str = /^\(?[2-9]\d{2}[\)\.-]?\s?\d{3}[\s\.-]?\d{4}$/
       return str.test(phone);
   }

   function email_Val()
   {
       var eM=document.forms["contact_Us"]["email"].value
       var x=eM.indexOf("@");
       var y=eM.lastIndexOf(".");
       if (x<1 || y<x+2 || y+2>=eM.length)
       {
          alert("Please enter a valid e-mail address");
          return false;
       }
   }

Without seeing the validate function, it'd be hard to answer. — Zirak
– Zirak, Commented Apr 30, 2011 at 14:53
Is validate() defined? Is an error being thrown? Where is it defined? Does it return false if validation fails? — Explosion Pills
– Explosion Pills, Commented Apr 30, 2011 at 14:53
Is the Javascript on the page correct, you have an onclick on the <submit> button, but otherwise nothing can be seen. — Orbling
– Orbling, Commented Apr 30, 2011 at 14:54
The setup looks right, but there's probably something going on with the validate() function. If there is a JavaScript error, the JavaScript code will bomb out and let the form be submitted. — mellamokb
– mellamokb, Commented Apr 30, 2011 at 14:54
I have added the javascript file above. In the heading section I have made a link to the seperate javascript file. — Mike
– Mike, Commented Apr 30, 2011 at 15:16

Community · Accepted Answer · 2020-06-20 09:12:55Z

2

Here's a link to a working version of your code: JSFiddle link

The easiest way to correct it is just to make sure you included the javascript in the head of your document, whether it's a link to an external file (preferably) or just inside the HTML. Then, check for syntax errors in your javascript, this might sometimes cause the code not to execute properly (or at all).

In your case, you did also try to access fields that did not exist in the code, which caused an error, and when an error is thrown the browser stops validation and just submits the form.

Here's the working version of your code:

  <html xmlns="http://www.w3.org/1999/xhtml" >
      <head>

      <title>contact.html</title>   

        <script type="text/javascript">
            function runValidate() 
 {

   //create references
   var fName;
   var mName;
   var lName;
   var email;
   var phone;
   
   fName = document.getElementById('firstName').value;  
       mName = document.getElementById('middleName').value;  
       lName = document.getElementById('lastName').value;  

       //validate the first name
       var fN=document.forms["contact_Us"]["firstName"].value;

       if (fN==null || fN=="")
       {
          alert("Please fill in first name.");
          return false;
       }

       //validate the last name
       var lN=document.forms["contact_Us"]["lastName"].value;
       if (lN==null || lN=="")
       {
       alert("Please fill in last name.");
       return false;
       }


 }

function isPhoneNumber(phone)
{
   var str = /^\(?[2-9]\d{2}[\)\.-]?\s?\d{3}[\s\.-]?\d{4}$/
   return str.test(phone);
}

function email_Val()
{
   var eM=document.forms["contact_Us"]["email"].value
   var x=eM.indexOf("@");
   var y=eM.lastIndexOf(".");
   if (x<1 || y<x+2 || y+2>=eM.length)
   {
      alert("Please enter a valid e-mail address");
      return false;
   }
}
          </script>
      </head> 
<body>
      <div id="right-cont">

        <form name = "contact_Us" action="http://nova.umuc.edu/cgi-bin/cgiwrap/ct386a28/eContact.php" method = "post"> 

            <div id="style2">
                <p>Please enter contact information below:</p>                                 
            </div>

            <div class="style7">
                <label>First Name: </label>
                &nbsp;<br /><input type="text" name = "firstName" id="firstName" tabindex="1" 
                    style="width: 176px" />
            </div>  

            <div class="style7">
                <label>Middle Name: </label>
                &nbsp;<br /><input type="text" name = "middleName" id ="middleName" tabindex="2" 
                    style="width: 176px" />
            </div>

            <div class="style7">
                <label>Last Name: </label>
                &nbsp;<br /><input type="text" name = "lastName" id ="lastName" tabindex="3" 
                    style="width: 176px" />
            </div>         

              <div class="style8">
                <label>Questions and/or comments: </label>
                &nbsp;<br /> <textarea name = "comment" id = "comment" rows = "10" cols = "60"></textarea>
              </div>             

          <div class =" buttons">
            <input type="submit" value="SUBMIT" onclick="return runValidate();"/><input type="reset" value="CLEAR"/> <br />                
          </div> 
          </div>              
       </form>
   </div>

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Apr 30, 2011 at 15:36

Herman Schaaf

48.7k21 gold badges107 silver badges140 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Hogan Over a year ago

Actually putting javascript at the head of the document does not run as fast as putting it at the end since it is a blocking load. This will only matter on very complex websites, but is still worth pointing out. Just because Dreamweaver did it that way does not mean it was the best way to go. developer.yahoo.com/performance/rules.html

Herman Schaaf Over a year ago

True, but that's why I said the easiest way - at least it ensures it works, even if the page hasn't fully loaded yet when the user clicks the button. If you need your website to load as fast as possible, put it right before the closing </body> tag, and load the script on document ready. I thought about saying this in my answer, but decided not to complicate things.

Hogan Over a year ago

@Herman - ok semantics -- I read the "make sure you included the javascript in the head of your document" as an absolute statement. Cheers.

Herman Schaaf Over a year ago

@Hogan - Also, did Dreamweaver do that? Haha, the good old days.

Hogan Over a year ago

@Herman - Yes, I believe that is where the practice gained widespread use. (Might have been a compatibility issue too with browsers that would try and parse it as html).

|

Scott C Wilson · Accepted Answer · 2011-04-30 14:54:48Z

1

Are you positive the javascript which contains the validate() function is included in your php? Do a view source on the page and double check.

answered Apr 30, 2011 at 14:54

Scott C Wilson

19.7k11 gold badges64 silver badges88 bronze badges

3 Comments

Mike Over a year ago

Whoa! Okay . . . you mean that I am supposed to include the Javascript in the actual .php file itself? The way I have it set up right now is that the validate is actually in a .js file called validator. It is set up in the header. . . Let me try it . . .

Mike Over a year ago

Okay it doesnt seem to matter where the javascript page is, it still doesnt validate it. I will put the javascript validation file in the text area above.

Scott C Wilson Over a year ago

Can you use Tools->Error Console in Firefox to see perhaps if there's a syntax error in your JS? This would also make it appear as though it's not running.

Thomas · Accepted Answer · 2011-04-30 15:29:07Z

1

Try folowing code for the submit button:

<input type="submit" value="SUBMIT" onclick = "validate()"/><input type="reset" value="CLEAR"/> <br />

answered Apr 30, 2011 at 15:29

Thomas

2,1371 gold badge32 silver badges47 bronze badges

Comments

Nobita · Accepted Answer · 2011-04-30 15:31:05Z

I've noticed that you have some syntax errors in your Javascript code, but also you are trying to access fields that are not declared in the HTML (such as phone and email). I've modified your Javascript, and it does what I think you expect that it should be doing:

 function validate() 
 {

   //create references
   var fName;
   var mName;
   var lName;
   var email;
   var phone;

   fName = document.getElementById('firstName').value;  
       mName = document.getElementById('middleName').value;  
       lName = document.getElementById('lastName').value;  

       //validate the first name
       var fN=document.forms["contact_Us"]["firstName"].value;

       if (fN==null || fN=="")
       {
          alert("Please fill in first name.");
          return false;
       }

       //validate the last name
       var lN=document.forms["contact_Us"]["lastName"].value;
       if (lN==null || lN=="")
       {
       alert("Please fill in last name.");
       return false;
       }


 }

Collectives™ on Stack Overflow

My web page is not running my JavaScript validation code

4 Answers 4

7 Comments

3 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

7 Comments

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related