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

你错过了＆＃34; ||＆＃34;算子在这里。它会触发语法错误，无法进一步执行javascript。

Answer 2

您的代码中有错误的错误||操作

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

Answer 3

代码有两个小问题，一个是错误原因。第一个是isNaN检查中存在语法错误，应该更改为isNaN(weight) || isNaN(minutes)。

其次，<input ...除了您的表单的onclick侦听器之外还有一个onsubmit侦听器，它会运行两次验证，以后可能会出现问题。

（请注意，我将警报更改为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;
}

在这种情况下，即使有错误，表单也不会提交！

为什么即使在表单字段为空后表单提交也可以？

4 个答案: