在错误时停止表单验证

Question

Hello I'm new to html and JS. 您好，我是html和JS的新手。 I have a problem with stopping my form before it gets sent to another static site when there is an error. 发生错误时，我在将表单发送到另一个静态站点之前停止表单存在问题。 All of my validation works but even if there are errors it still redirects to the other site. 我所有的验证工作正常，但是即使有错误，它仍然会重定向到另一个站点。 I'm not sure if I'm supposed to code a if statement on "action" or on the submit button. 我不确定是否应该在“操作”或“提交”按钮上编写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

If you want to stop the validation, add return false; 如果要停止验证，请添加return false; in your conditions with error, this will stop the submit if there is an error, like this for exemple: 在有错误的情况下，如果出现错误，这将停止提交，例如：

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

Change your JavaScript method, validate, to return a value. 更改您的JavaScript方法，验证以返回值。 Return true, if the fields are valid, return false, if not. 如果字段有效，则返回true，否则返回false。 That will prevent your form from submitting. 这将阻止您的表单提交。

在错误时停止表单验证

问题描述

2 个解决方案

解决方案1
0 已采纳 2014-03-03 15:23:10

解决方案2
0 2014-03-03 15:23:41

在错误时停止表单验证

问题描述

2 个解决方案

解决方案1 0 已采纳 2014-03-03 15:23:10

解决方案2 0 2014-03-03 15:23:41

解决方案1
0 已采纳 2014-03-03 15:23:10

解决方案2
0 2014-03-03 15:23:41