我的网页没有运行我的JavaScript验证码

时间:2011-04-30 14:51:36

标签: php javascript html

好的,所以我将表单设置为我的PHP页面。我还将提交按钮onsubmit设置为我的验证javascript。会发生什么,它直接进入我的PHP页面,并不验证输入?我错过了什么?我有这个设置吗?如果我从表单中删除php文件,javascript validate工作正常。它试图一起使用php和javascript让我疯狂。

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

4 个答案:

答案 0 :(得分:2)

以下是指向代码的工作版本的链接:JSFiddle link

最简单的纠正方法就是确保将javascript包含在文档的head中,无论是指向外部文件的链接(最好是还是HTML)。然后,检查javascript中的语法错误,这有时可能导致代码无法正常执行(或根本不执行)。

在您的情况下,您还尝试访问代码中不存在的字段,这会导致错误,并且当引发错误时,浏览器停止验证并仅提交表单。

以下是您的代码的工作版本:

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

答案 1 :(得分:1)

你是否肯定包含validate()函数的javascript包含在你的php中?在页面上执行查看源并仔细检查。

答案 2 :(得分:1)

尝试提交按钮的以下代码:

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

答案 3 :(得分:1)

我注意到您的Javascript代码中存在一些语法错误,但您也尝试访问未在HTML中声明的字段(例如电话和电子邮件)。我已经修改了你的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;  

       //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;
       }


 }