Question

我有一个html代码保存为php，表单验证在谷歌浏览器中工作但不在IE中。在按下提交按钮后的IE中，无论错误如何，页面都会自动进入处理表单。

这是我的代码：

<!DOCTYPE html>
<html>
    <head>
        <title>Week 8 Lab - JavaScript DOM and Arrays</title>
        <meta charset="utf-8">
        <link href="css/style.css" rel="stylesheet">
    </head>
    <body>
  <script>
    function validateForm() {
        var errors = 0;
        var fName = document.forms["orderForm"].firstName.value;//first name validation
        if (fName == null || fName == "")
        {
            document.getElementById('firstNameError').innerHTML = "Please enter a first name.";
            errors++;
        } else {
            document.getElementById('firstNameError').innerHTML = "";
        }


        //var lName = document.forms["orderForm"].lastName.value;//last name validation
        if (lName == null || lName == "")
        {
            document.getElementById('lastNameError').innerHTML = "Please enter a last name.";
            errors++;
        } else {
            document.getElementById('lastNameError').innerHTML = "";
        }


        //var address = document.forms["orderForm"].address.value;//address validation
        if (address == null || address == "")
        {
            document.getElementById('addressError').innerHTML = "Please enter an address.";
            errors++;
        } else {
            document.getElementById('addressError').innerHTML = "";
        }


        //var city = document.forms["orderForm"].city.value;//city validation
        if (city == null || city == "")
        {
            document.getElementById('cityError').innerHTML = "Please enter a city.";
            errors++;
        } else {
            document.getElementById('cityError').innerHTML = "";
        }


        //var pCodeCheck = /^[0-9a-zA-Z]+$/;//postal code validation
        if (pCodeCheck)
        {
            document.getElementById('postalCoderror').innerHTML = "";
        }
        else
        {

            document.getElementById('postalCoderror').innerHTML = "Please enter a valid postal code.";
            errors++;
        }

        // makes sure you cannot order a negative number of items


        var itemQTY = document.forms["orderForm"].widget1qty.value;
        if (itemQTY < 0)
        {
            document.getElementById('qtyError').innerHTML = "You cannot enter a negative number.";
            errors++;
        } else {
            document.getElementById('qtyError').innerHTML = "";
        }


        var itemQTY2 = document.forms["orderForm"].widget2qty.value;
        if (itemQTY2 < 0)
        {
            document.getElementById('qtyError2').innerHTML = "You cannot enter a negative number.";
            errors++;
        } else {
            document.getElementById('qtyError2').innerHTML = "";
        }


        var itemQTY3 = document.forms["orderForm"].widget3qty.value;
        if (itemQTY3 < 0)
        {
            document.getElementById('qtyError3').innerHTML = "You cannot enter a negative number.";
            errors++;
        } else {
            document.getElementById('qtyError3').innerHTML = "";
        }

        //makes sure there is at least one item ordered
        var wid1Qty = document.getElementById('widget1qty').value;
        var wid2Qty = document.getElementById('widget2qty').value;
        var wid3Qty = document.getElementById('widget3qty').value;
        if (wid1Qty + wid2Qty + wid3Qty == 0)
        {
            document.getElementById('itemQTY').innerHTML = "You must order atleast one item.";
            errors++;
        } else {
            document.getElementById('itemQTY').innerHTML = "";
        }
        var total1;
        var total2;
        var total3;
        var total4;

        total1 = document.forms['orderForm']['widget1qty'].value * 5;
        total2 = document.forms['orderForm']['widget2qty'].value * 15;
        total3 = document.forms['orderForm']['widget3qty'].value * 25;
        total4 = (total1 + total2 + total3);
        alert('Your total is: $' + total4 + '.00');
        return errors;
    }

    function startValidate() {
        var errors = validateForm();
        if (errors == 0) {
            document.forms['orderForm'].submit();
        } else {
            return false;
        }
    }
</script>
        <div id="wrapper">
            <h2 class="center">Order Form</h2> <!-- action="processForm.html"       "javascript:void(0)" -->
            <form name="orderForm" method="post" action="processForm.html" onsubmit="return startValidate()">
                <fieldset>
                    <legend>Personal Information</legend>
                    <table>

                        <tr>
                            <th colspan="3"></th>
                        </tr>
                        <tr>
                            <td><span class="required">*</span>First Name:</td>
                            <td><input type="text" name="firstName" id="firstName" size="30"></td>
                            <td id="firstNameError"></td>
                        </tr>
                        <tr>
                            <td><span class="required">*</span>Last Name:</td>
                            <td><input type="text" name="lastName" id="lastName" size="30"></td>
                            <td id="lastNameError"></td>
                        </tr>
                        <tr>
                            <td><span class="required">*</span>Address:</td>
                            <td><input type="text" name="address" id="address" size="30"></td>
                            <td id="addressError"></td>
                        </tr>
                        <tr>
                            <td><span class="required">*</span>City:</td>
                            <td><input type="text" name="city" id="city" size="30"></td>
                            <td id="cityError"></td>
                        </tr>
                        <tr>
                            <td><span class="required">*</span>Province:</td>
                            <td><select name="province" id="province" size="1">
                                    <option disabled>Select a province</option>
                                    <option value="BC">British Columbia</option>
                                    <option value="AB">Alberta</option>
                                    <option value="SK">Saskatchewan</option>
                                    <option value="MB">Manitoba</option>
                                    <option value="ON">Ontario</option>
                                    <option value="QC">Quebec</option>
                                    <option value="NB">New Brunswick</option>
                                    <option value="NS">Nova Scotia</option>
                                    <option value="PE">Prince Edward Island</option>
                                    <option value="NF">Newfoundland</option>
                                    <option value="YK">Yukon</option>
                                    <option value="NWT">Northwest Territories</option>
                                    <option value="NU">Nunavut</option>
                                </select>
                            </td>
                            <td></td>
                        </tr>
                        <tr>
                            <td><span class="required">*</span>Postal Code:</td>
                            <td><input type="text" name="postalCode" id="postalCode" maxlength="6"></td>
                            <td id="postalCoderror"></td>
                        </tr>
                    </table>
                </fieldset>
                <fieldset>
                    <legend>Order Information</legend>

                    <table>
                        <tr>
                            <th colspan="3"></th>
                        </tr>
                        <tr>
                            <td rowspan="3">Select your products:<br>
                            <td>Widget #1&nbsp;
                                <input type="text" name="widget1qty" id="widget1qty" size="1" value="0">Qty @ <strong>$5.00/ea</strong></td>
                            <td id="qtyError"></td>
                        </tr>
                        <tr>
                            <td>Widget #2&nbsp;
                                <input type="text" name="widget2qty" id="widget2qty" size="1" value="0">Qty @ <strong>$15.00/ea</strong></td>
                            <td id="qtyError2"></td>
                        </tr>
                        <tr>
                            <td>Widget #3&nbsp;
                                <input type="text" name="widget3qty" id="widget3qty" size="1" value="0">Qty @ <strong>$25.00/ea</strong></td>
                            <td id="qtyError3"></td>
                        </tr>
                        <tr>
                            <td rowspan="3"></td>
                            <td></td>
                            <td id="itemQTY"></td>
                        </tr>

                        <tr>
                            <td rowspan="3">Shipping Type:</td>
                            <td>Standard ($5.00)<input type="radio" name="shippingType" id="shippingTypeStandard" value="Standard" checked></td>

                        </tr>
                        <tr>
                            <td>Express ($10.00)<input type="radio" name="shippingType" id="shippingTypeExpress" value="Express"></td>
                        </tr>
                        <tr>
                            <td>Overnight ($20.00)<input type="radio" name="shippingType" id="shippingTypeOvernight" value="Overnight"></td>
                        </tr>

                    </table>
                </fieldset>
                <fieldset>
                    <legend>Submit Order</legend>
                    <table>
                        <tr>
                            <th colspan="2"></th>
                        </tr>
                        <tr>
                        <input type="submit" name="btnSubmit" id="btnSubmit" value="Submit Order">
                        <td><input type="reset" name="btnReset" id="btnReset" value="Reset Form"></td>
                        </tr>
                    </table>
                </fieldset>
            </form>
        </div>  
    </body>

Answer 1

当您在IE的开发人员工具（F12）中查看控制台时，您将看到有关未声明的变量lName的错误消息。这会导致错误检查中止。

你有几行像

//var lName = document.forms["orderForm"].lastName.value;//last name validation

由于//在JavaScript中启动注释，因此该行无效。变量lName也未在其他地方声明或定义。

因此，您需要删除那些//评论启动者。请注意，代码在Chrome中也不起作用;您可能在Chrome中测试了其他版本，或者误解了某些行为。

在控制台中，您还可以看到有关“意外标识符”的第237行的消息。它实际上是一个严重的HTML标记错误; IE以奇怪的方式报告了一些此类错误。错误是tr元素具有input元素作为子元素，在HTML语法中是禁止的。这就是提交订单和重置表单彼此重叠而不是与预期相同的行的原因。（为了实用性，应该删除“重置表单”按钮，但我离题了。）

IE上没有错误的表单验证

1 个答案: