Question

我的javascript无法正常加载。我不知道为什么。我是编程/脚本的新手......我很感激帮助。

这背后的想法是在不使用警报的情况下验证表单，但它似乎根本不执行。

这是我的代码：

validateForm()

    {
var province = document.getElementByID("province");
var postalcode = document.getElementByID("postalcode");

    if(province.value == "Select a province")  
    {  
        document.write('Select your province from the list');  
        province.focus();  
        return false;   
    }             
    else  
    {     
        return true;  
    }  

    if(postalcode.length<6)
    {
        document.write("You must enter a valid postal code .");
    }


    var widget1qty=document.getElementById("widget1qty").innerHTML;
    var widget2qty=document.getElementById("widget2qty").innerHTML;
    var widget3qty=document.getElementById("widget3qty").innerHTML;


        if(widget1qty ==0)
        {
    document.write("You must select some widgets.");
        }

        if(widget2qty < 0 )
        {
    document.write("You must select some widgets.");
        }

        if(widget3qty < 0 )
        {
    document.write("You must select some widgets.");
        }

                    }

HTML：

    <h2>Order Form</h2>
    <form name="myForm" method="post" action="processForm.html" onsubmit="validateForm()">
    <table>
        <tr>
            <th colspan="2">Personal Information</th>
        </tr>
        <tr>
            <td>First Name:</td>
            <td><input type="text" name="firstName" id="firstName" size="30"  required></td>
        </tr>
        <tr>
            <td>Last Name:</td>
            <td><input type="text" name="lastName" id="lastName" size="30" required></td>
        </tr>
        <tr>
            <td>Address:</td>
            <td><input type="text" name="address" id="address" size="30" required></td>
        </tr>
        <tr>
            <td>City:</td>
            <td><input type="text" name="city" id="city" size="30" required></td>
        </tr>
        <tr>
            <td>Province:</td>
            <td><select name="province" id="province" size="1" required>
                    <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">Québec</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>
        </tr>
        <tr>
            <td>Postal Code:</td>
            <td><input type="text" name="postalCode" id="postalCode" maxlength="6"  minlength="6" required></td>
        </tr>
        <tr>
            <th colspan="2">Order Information</th>
        </tr>
        <tr>
            <td rowspan="3">Select your products:<br>
                <span id="productError" class="errorMessage" hidden></span></td>
            <td>Widget #1&nbsp;
                <input type="text" name="widget1qty" id="widget1qty" size="1" value="0">Qty @ <strong>$5.00/ea</strong></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>
        </tr>
        <tr>
            <td>Widget #3&nbsp;
                <input type="text" name="widget3qty" id="widget3qty" size="1" value="0">Qty @ <strong>$25.00/ea</strong></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>
        <tr>
            <th colspan="2">Submit Order</th>
        </tr>
        <tr>
            <td><input type="submit" name="btnSubmit" id="btnSubmit" value="Submit Order" onSubmit="validateForm()"></td>
            <td><input type="reset" name="btnReset" id="btnReset" value="Reset Form" ></td>
        </tr>
    </table>
    </form>
</body>

`

Answer 1

那是你的完整javascript吗？由于你还没有完成关闭，它将会出乎意料的结局。如果您使用谷歌浏览器查看HTML，请按F12以获取开发人员工具并查看控制台。

它也是getElementById或getElementsByName

document.getElementById(string);

该调用只能返回一个元素，因为Ids是唯一的。

document.getElementsByName(string);

该调用可以返回多个元素，因为名称不是唯一的。这意味着即使有阵列也会得到一个阵列。

你不需要多余的其他东西。如果你没有逻辑，就不需要包含它。
您将获得相同的窗口小部件值并将其交给widgetqty1，widgetqty2和widgetqty3。
您永远不会关闭功能定义。您需要最后的结束大括号（}）以确保它是一个有效的函数。

您最终应该使用以下代码：

<html>
<head>
    <script>
        function validateForm(ev){
            var province, postalcode, widget1qty, widget2qty, widget3qty;

            province = document.getElementById("province");
            postalcode = document.getElementById("postalcode");
            widget1qty = document.getElementById("widget1qty").innerHTML;
            widget2qty = document.getElementById("widget2qty").innerHTML;
            widget3qty = document.getElementById("widget3qty").innerHTML;

            if(province.value == "Select a province")  
            {  
                document.write('Select your province from the list');  
                // You realize this overwrites your entire document?  
                province.focus();  
                return false;   
            }

            if(postalcode.length<6)
            {
                document.write("You must enter a valid postal code .");
                // You realize this overwrites your entire document?  
                postcalcode.focus();
                return false;
            }

            if(widget1qty == 0 || widget2qty < 0 || widget3qty < 0)
            {
                document.write("You must select some widgets.");
                // You realize this overwrites your entire document?  
                return false;
            }
        }
    </script>
</head>
<body>
    <h2>Order Form</h2>
    <form onsubmit="return validateForm()"name="myForm" method="post" action="processForm.html">
    <table>
        <tr>
            <th colspan="2">Personal Information</th>
        </tr>
        <tr>
            <td>First Name:</td>
            <td><input type="text" name="firstName" id="firstName" size="30"  required></td>
        </tr>
        <tr>
            <td>Last Name:</td>
            <td><input type="text" name="lastName" id="lastName" size="30" required></td>
        </tr>
        <tr>
            <td>Address:</td>
            <td><input type="text" name="address" id="address" size="30" required></td>
        </tr>
        <tr>
            <td>City:</td>
            <td><input type="text" name="city" id="city" size="30" required></td>
        </tr>
        <tr>
            <td>Province:</td>
            <td><select name="province" id="province" size="1" required>
                    <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">Québec</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>
        </tr>
        <tr>
            <td>Postal Code:</td>
            <td><input type="text" name="postalCode" id="postalCode" maxlength="6"  minlength="6" required></td>
        </tr>
        <tr>
            <th colspan="2">Order Information</th>
        </tr>
        <tr>
            <td rowspan="3">Select your products:<br>
                <span id="productError" class="errorMessage" hidden></span></td>
            <td>Widget #1&nbsp;
                <input type="text" name="widget1qty" id="widget1qty" size="1" value="0">Qty @ <strong>$5.00/ea</strong></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>
        </tr>
        <tr>
            <td>Widget #3&nbsp;
                <input type="text" name="widget3qty" id="widget3qty" size="1" value="0">Qty @ <strong>$25.00/ea</strong></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>
        <tr>
            <th colspan="2">Submit Order</th>
        </tr>
        <tr>
            <td><input type="submit" name="btnSubmit" id="btnSubmit" value="Submit Order" ></td>
            <td><input type="reset" name="btnReset" id="btnReset" value="Reset Form" ></td>
        </tr>
    </table>
    </form>
</body>

javascript无法正常执行;不确定为什么。验证表格

1 个答案: