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

Question

My javascript won't properly load. I am not sure why. I am new to programming/scripting.. i appreciate the help.

The idea behind this is to validate a form without using alerts, however it does not seem to execute at all.

Here's my code:

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

Is that your full javascript? It is going to be pulling an unexpected end since you haven't finished your closures. If you are using Google Chrome to view the HTML, hit F12 to get the developer tools and view the console.

Also it is getElementById or getElementsByName

document.getElementById(string);

That call can only return one element since Ids are unique.

document.getElementsByName(string);

That call can return multiple elements as names are not unique. Meaning you are going to get an array even if there is one.

---

1. You don't need the excess 'else's. If you don't have logic in it, no need to include it.
2. You are getting the same widget value and handing it into widgetqty1, widgetqty2, and widgetqty3.
3. You never close the function definition. You need the last ending curly brace (}) to make sure it is a valid function.

---

You should end up with the following code:

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