即使表單域爲空後，爲什麼可以提交表單？

Question

下面是HTML

<form action="../phpFiles/reportCalorie.php" method="post" 
onsubmit="return calculateCalorie()" name="bmiform"> 
        <select name="activity" > 
         <option value="">Select any activity</option> 
         <option value="1">baseball</option> 
         <option value="2">basketball</option> 
         <option value="3">jogging</option> 
         <option value="4">walking</option> 
         <option value="5">Cycling</option> 
         <option value="6">Running</option> 
         <option value="7">Swimming</option> 
         <option value="8">Handball</option> 
         <option value="9">Cricket</option> 
         <option value="10">Football</option> 
        </select>  

       </td> 
      </tr> 

      <tr> 
       <td><h4>How many minutes?</h4></td> 
       <td> 
        <input type="number" name="minutes" size="5px"/> 
        minutes 
       </td> 
      </tr> 
      <tr> 
       <td><h4>Enter your weight</h4></td> 
       <td> 
        <input type="text" name="weight" size="5px"/> 
        KG 

       </td> 
      </tr> 
      <tr> 
       <td><h4>Enter your Age</h4></td> 
       <td> 
        <input type="text" name="age" size="5px"/> 
        Years 

       </td> 
      </tr> 
      <tr> 
       <td><h4>Enter your height</h4></td> 
       <td> 

        <input type="text" name="feet" size="5px"/> 
        FEET 
        <input type="text" name="inches" size="5px"/> 
        inches 

       </td> 
      </tr> 
      <tr> 
       <td colspan="2"> 
       <input class="button1" type="submit" name="calculate" 
     value="Calculate" title="calculate" onclick="calculateCalorie()"/> 
       <br/><br/> 
       </form> 

這裏是JavaScript

<script type="text/javascript"> 
    function calculateCalorie() 
    { 
     if(validate()) 
     {   
      var minutes=+document.bmiform.minutes.value; 
      var weight=+document.bmiform.weight.value; 

      return true 
     } 
     else 
     { 
      return false; 
     } 
    } 

    function validate() 
    { 
     var age = document.bmiform.age.value; 
     var feet = document.bmiform.feet.value; 
     var inches = document.bmiform.inches.value; 
     var weight = document.bmiform.weight.value; 
     var minutes= document.bmiform.minutes.value; 

     if(age =="" || feet=="" || inches=="" || weight=="" || minutes=="") 
     { 
      alert("Your fields are empty"); 
      return false 
     } 

     else if(isNaN(age) || isNaN(feet) || isNaN(inches) || 
     isNaN(weight) isNaN(minutes)) 
     { 
      alert("Please enter valid input") 
      return false; 

     } 
     else{ 
      return true; 
     } 

    } 
    </script> 

我不明白，即使我離開賽場空爲什麼它接受的形式和直接我到其他頁面。如果有什麼不對，請讓我知道？我將不勝感激任何幫助。

Answer 1

else if(isNaN(age) || isNaN(feet) || isNaN(inches) || 
     isNaN(weight) isNaN(minutes)) 

你錯過了「||」這裏的操作員它會觸發語法錯誤，從而導致進一步的JavaScript執行失敗。

Answer 2

您的代碼有錯誤，您的遺漏||運營商

 else if(isNaN(age) || isNaN(feet) || isNaN(inches) || 
 
     isNaN(weight) || isNaN(minutes)) 
 
     { 
 
      alert("Please enter valid input") 
 
      return false; 
 

 
     }

Answer 3

沒有與代碼2個小問題，一個是錯誤的原因。首先是isNaN檢查中存在語法錯誤，應將其更改爲isNaN(weight) || isNaN(minutes)。

其次，<input ...除了您的表單的onsubmit偵聽器之外，還有一個onclick偵聽器，該偵聽器運行兩次驗證並可能在稍後導致問題。

（請注意，我改變了警報到的console.log，所以段將工作）

function calculateCalorie() 
 
    { 
 
     if(validate()) 
 
     {   
 
      var minutes=+document.bmiform.minutes.value; 
 
      var weight=+document.bmiform.weight.value; 
 

 
      console.log('submitting'); 
 
      return true 
 
     } 
 
     else 
 
     { 
 
      return false; 
 
     } 
 
    } 
 

 
    function validate() 
 
    { 
 
     var age = document.bmiform.age.value; 
 
     var feet = document.bmiform.feet.value; 
 
     var inches = document.bmiform.inches.value; 
 
     var weight = document.bmiform.weight.value; 
 
     var minutes= document.bmiform.minutes.value; 
 

 
     if(age =="" || feet=="" || inches=="" || weight=="" || minutes=="") 
 
     { 
 
      console.log("Your fields are empty"); 
 
      return false; 
 
     } 
 

 
     else if(isNaN(age) || isNaN(feet) || isNaN(inches) || 
 
     isNaN(weight) || isNaN(minutes)) 
 
     { 
 
      console.log("Please enter valid input") 
 
      return false; 
 

 
     } 
 
     else{ 
 
      return true; 
 
     } 
 

 
    }

<form action="../phpFiles/reportCalorie.php" method="post" 
 
onsubmit="return calculateCalorie()" name="bmiform"> 
 
        <select name="activity" > 
 
         <option value="">Select any activity</option> 
 
         <option value="1">baseball</option> 
 
         <option value="2">basketball</option> 
 
         <option value="3">jogging</option> 
 
         <option value="4">walking</option> 
 
         <option value="5">Cycling</option> 
 
         <option value="6">Running</option> 
 
         <option value="7">Swimming</option> 
 
         <option value="8">Handball</option> 
 
         <option value="9">Cricket</option> 
 
         <option value="10">Football</option> 
 
        </select>  
 

 
       </td> 
 
      </tr> 
 

 
      <tr> 
 
       <td><h4>How many minutes?</h4></td> 
 
       <td> 
 
        <input type="number" name="minutes" size="5px"/> 
 
        minutes 
 
       </td> 
 
      </tr> 
 
      <tr> 
 
       <td><h4>Enter your weight</h4></td> 
 
       <td> 
 
        <input type="text" name="weight" size="5px"/> 
 
        KG 
 

 
       </td> 
 
      </tr> 
 
      <tr> 
 
       <td><h4>Enter your Age</h4></td> 
 
       <td> 
 
        <input type="text" name="age" size="5px"/> 
 
        Years 
 

 
       </td> 
 
      </tr> 
 
      <tr> 
 
       <td><h4>Enter your height</h4></td> 
 
       <td> 
 

 
        <input type="text" name="feet" size="5px"/> 
 
        FEET 
 
        <input type="text" name="inches" size="5px"/> 
 
        inches 
 

 
       </td> 
 
      </tr> 
 
      <tr> 
 
       <td colspan="2"> 
 
       <input class="button1" type="submit" name="calculate" 
 
     value="Calculate" title="calculate" /> 
 
       <br/><br/> 
 
       </form>

Answer 4

你也應該調用了preventDefault，以防止默認的形式。

function customSubmitFunction(evt) { 
    evt.preventDefault(); 
    someBug(); 
    return false; 
} 

在這種情況下，即使有bug，表單也不會提交！