Question

您好我是html和JS的新手。在出现错误时，在将表单发送到另一个静态站点之前，我遇到了问题。我的所有验证都有效，但即使有错误，它仍会重定向到其他站点。我不确定我是否应该在“动作”或提交按钮上编写if语句。

<!DOCTYPE html>
<html>
<head>
    <title>Week 8 Lab - JavaScript DOM and Arrays</title>
    <meta charset="utf-8">

</head>
<body>
<script>
     function validate()
    {
        var fName =document.forms["orderForm"].firstName.value//firstname validation
        if(fName==null || fName=="")
        {
            document.getElementById('firstNameError').innerHTML= "Please enter a first name.";
        }


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


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


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


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

                    // 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.";
        }


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


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

                    //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.";
        }





    }
</script>

    <h2>Order Form</h2> <!-- action="processForm.html"      "javascript:void(0)" -->
    <form name="orderForm" method="post" onsubmit="validate();" 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"></td>
            <td id="firstNameError"></td>
        </tr>
        <tr>
            <td>Last Name:</td>
            <td><input type="text" name="lastName" id="lastName" size="30"></td>
            <td id="lastNameError"></td>
        </tr>
        <tr>
            <td>Address:</td>
            <td><input type="text" name="address" id="address" size="30"></td>
            <td id="addressError"></td>
        </tr>
        <tr>
            <td>City:</td>
            <td><input type="text" name="city" id="city" size="30"></td>
            <td id="cityError"></td>
        </tr>
        <tr>
            <td>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">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"></td>
            <td id="postalCoderror"></td>
        </tr>
        <tr>
            <th colspan="2">Order Information</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>
        <th colspan="3"></th><tr></tr><tr></tr><tr></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" onclick="validate();" value="Submit Order"></td>
            <td><input type="reset" name="btnReset" id="btnReset" value="Reset Form"></td>
        </tr>
    </table>
    </form>
</body>

Answer 1

如果您想要停止验证，请在条件中添加return false;并显示错误，如果出现错误，则会停止提交，例如：

var fName =document.forms["orderForm"].firstName.value//firstname validation
if(fName==null || fName=="")
{
    document.getElementById('firstNameError').innerHTML= "Please enter a first name.";
    return false;
}

Answer 2

更改您的JavaScript方法，验证，以返回值。返回true，如果字段有效，则返回false，否则返回false。这将阻止您的表单提交。

在错误时停止表单验证

2 个答案: