2014-10-10 34 views
0

我最近一直在使用HTML和JavaScript,我試圖創建一個表單,其中有一個外部JavaScript文件鏈接到調用函數來驗證表單的HTML文件。我的問題是,我的表單在填寫某些字段時或者沒有提示,或者表單提交錯誤。使用HTML和Javascript的表格

這是我到目前爲止有:

HTML:

<!DOCTYPE html> 

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

<head> 
    <title> Project 2 Submission Form </title> 
    <meta charset="UTF-8"> 

    <script type="text/javascript" src="test.js" language="javascript"> 
    </script> 

</head> 

<body> 

    <form id="myForm" action=""> 

    <table width="250" border="0" align="left"> 
     <tr> 
     <form name="myForm" action="mailto:[email protected]" method="post" onsubmit="return Validate();"> 
      <td> 
      <table width="100%" border="0"> 
       <tr> 
       <td colspan="3"> 
        <center><strong>Please Fill Out the Information Below</strong> 
        </center> 
       </td> 
       </tr> 
       <tr> 
       <td width="50">First Name</td> 
       <td width="5">:</td> 
       <td width="300"> 
        <input name="firstname" type="text" id="FirstName" required> 
       </td> 
       </tr> 
       <tr> 
       <td>Last Name</td> 
       <td>:</td> 
       <td> 
        <input name="Last Name" type="text" id="LastName"> 
       </td> 
       </tr> 
       <tr> 
       <tr> 
        <td>Middle Name (Optional)</td> 
        <td>:</td> 
        <td> 
        <input name="Middle Name" type="text" id="MiddleName"> 
        </td> 


        <tr> 
        <td>Age</td> 
        <td>:</td> 
        <td> 
         <input name="Age" type="text" id="Age"> 
        </td> 
        </tr> 

        <tr> 
        <td>Sex</td> 
        <td>:</td> 
        <td> 
         <input name="Sex" type="text" id="Sex"> 
        </td> 
        </tr> 


        <tr> 
        <td>Birth Date</td> 
        <td>:</td> 
        <td> 
         <input name="BirthDate" type="text" id="BirthDate"> 
        </td> 
        </tr> 

        <tr> 
        <td>Height</td> 
        <td>:</td> 
        <td> 
         <input name="Height" type="text" id="Height"> 
        </td> 
        </tr> 

        <tr> 
        <td>Weight</td> 
        <td>:</td> 
        <td> 
         <input name="Weight" type="text" id="Weight"> 
        </td> 
        </tr> 

        <tr> 
        <td>Salary</td> 
        <td>:</td> 
        <td> 
         <input name="Salary" type="text" id="Salary"> 
        </td> 
        </tr> 


        <tr> 
        <td>Email</td> 
        <td>:</td> 
        <td> 
         <input name="Email" type="text" id="Email"> 
        </td> 
        </tr> 


       </tr> 
       <tr> 
        <td>&nbsp;</td> 
        <td>&nbsp;</td> 
        <td> 
        <input type="submit" name="submit" value="Submit Form"> 
        </td> 



       </tr> 
      </table> 
      </td> 
     </form> 
     </tr> 
    </table> 
    </form> 
</body> 

</html> 

的JavaScript:

<script> 
function Validate() 
{ 
    var fName = document.myForm.fName; 
    var lName = document.myForm.lNAme; 
    var mName = document.myForm.mName; 
    var age = document.myForm.age; 
    var sex = document.myForm.sex; 
    var birth = document.myForm.birth; 
    var hght = document.myForm.hght; 
    var wght = document.myForm.wght; 
    var sal = document.myForm.sal; 
    var email = document.myForm.email; 



     if (fName.value == ""){ 
     alert("This field cannot be left blank."); 
     fName.focus(); 
     return false; 
     } 

     if (lName.value == ""){ 
     alert("This field cannot be left blank"); 
     lName.focus(); 
     return false; 
     } 


     if (age.value == ""){ 
     alert("This field cannot be left blank"); 
     age.focus(); 
     return false; 
     else if (age.value <1 || >99({ 
      alert("Please re-enter your age"); 
      return false; 
     } 

     } 



     if (sex.value == ""){ 
     alert("This field cannot be left blank"); 
     sex.focus(); 
     return false; 
     else if(sex.value != "Male" || "male" || "M" || "m" || "Female" || "female" || "F" || "f"){ 
      alert("The sex you have entered is not entered correctly, please try again."); 
      return false; 
    } 

    } 


     if(birth.value == ""){ 
      alert("Date of birth cannot be left blank."); 
      birth.focus(); 
      return false; 
      else if(birthdate != "mm/dd/yyyy"){ 
      alert("Enter the format in mm/dd/yyyy format); 
      return false; 
     } 

     } 



     if (hght.value == ""){ 
      alert("This field cannot be left blank"); 
      hght.focus(); 
      return false; 
     else if(hght <2 || > 7){ 
      alert("please enter your height in feet in inches in following format: x.y"); 
      return false; 
    } 


     } 



     if (wght.value == "") 
    { 
     alert("This field cannot be left blank"); 
     wght.focus(); 
     return false; 
     else if(weight < 0){ 
     alert("please enter a valid weight in pounds."); 
     return false; 
    } 

    } 



     if (sal.value == "") 
    { 
     alert("This field cannot be left blank."); 
     sal.focus(); 
     return false; 
     else if(sal.val.indexOf("$") != 0){ 
      alert("Please insert a dollar sign in the beginning of the entry"); 
      return false; 
     } 
      else if(sal.val <0 || >999999.99){ 
       alert("Please re-enter your salary"); 
       return false; 
      } 

    } 




     if (email.value == "") 
    { 
     alert("Please enter your email address."); 
     email.focus(); 
     return false; 
    } 
    else{ 
    return true; 
    } 
} 
</script> 

我一直在使用Chrome和IE,但沒有運氣測試這一點。任何人都可以告訴我什麼是錯誤的,或者我可以嘗試使這種形式發揮作用的另一種做法?

+0

請調試你的javascript代碼,你發現這個錯誤很容易 – Kishan 2014-10-10 04:15:23

回答

1

您有兩個<form>標籤。將第二個移到第一個的位置,並刪除現在的第一個。

...

<form name="myForm" action="mailto:[email protected]" method="post" onsubmit="return Validate();"> 

<table width="250" border="0" align="left" > 
<tr> 
<td> 
<table width="100%" border="0" > 
<tr> 
<td colspan="3"><center><strong>Please Fill Out the Information Below</strong></center></td> 
</tr> 
<tr> 

...

編輯補充:您也有一堆驗證錯誤,主要是由於不正確地嵌套的標籤。在遇到HTML問題時,首先要做的事是用http://validator.w3.org驗證您的HTML並修正錯誤。

另一編輯:您已編碼var fName = document.myForm.fName;但您的HTML中沒有這樣的東西。與您的其他變量聲明類似。查找document.getElementById()方法並使用它來聲明變量指針。

+0

謝謝Bob。我要給這個鏡頭,看看它是否清除了我所有的奇怪問題。 – Sweaver 2014-10-10 02:37:52

+0

提交的問題已得到解決,但即使填寫第一個文本字段而其餘都爲空,也不會引發其他警報。有關可能導致此問題的任何想法? – Sweaver 2014-10-10 02:42:01

+0

@jmart:你糾正了HTML錯誤嗎?如果不是,那就先做。然後使用Chrome的開發人員工具或Firefox的Firebug查看您的JavaScript所需的內容。 – 2014-10-10 02:43:33