Question

我已经完成了所有验证码但是我不太确定如何编码在提交表单之前弹出警报但验证完成后。漂亮我的警报哪些字段有错误，以及什么错误不会出现在什么时候我提交此表格。所有这一切都指引着我尽管有错误，仍可提交成功的页面。

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


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


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


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


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

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


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


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

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

function startValidate(){
        validateForm();
        document.forms['orderForm'].submit();

}
</script>
    <div id="wrapper">
    <h2 class="center">Order Form</h2> <!-- action="processForm.html"       "javascript:void(0)" -->
    <form name="orderForm" method="post" onsubmit="validate();" action="processForm.html">
    <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">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>
            <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></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>

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

Answer 1

你需要

<form name="orderForm" method="post" onsubmit="return validate();">

大于

<form name="orderForm" method="post" onsubmit="validate();">

它的“返回”部分确保javascript返回true / false值并执行任何必要的操作

并且在你的脚本中尝试使用一个作为控件的布尔变量，以便例如“有效”如果9/10是正确的，则布尔值有效将为false，然后表单将不会提交。以下示例

function validateForm() {
  var valid = new Boolean(true);
  //code here - example
  var fName = document.forms["orderForm"].firstName.value;//first name validation
    if(fName==null || fName=="")
    {
        valid = false;
        document.getElementById('firstNameError').innerHTML= "Please enter a first name.";
        return false;
    }
  return valid

}

Answer 2

这就是我要做的事情：

HTML：

<body>
    <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">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>
                        <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></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>

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

JS：

  <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 (postalCode.value.match(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>

Answer 3

当您致电startValidate()时，无论document.forms.submit是否返回validateForm()或true，它都会启动false行。如果validateForm()返回true，您只需提交表单。验证器中的false返回不会像您认为的那样终止startValidate()函数。

在检查完所有输入后，尝试将document.forms['orderForm'].submit();向上移动到validateForm()方法的底部。

Answer 4

使用onsubmit="startValidate();"

 <form name="orderForm" method="post" onsubmit="startValidate();"   action="processForm.html">

您可以按如下方式使用jQuery Validate插件。

<强> jQuery的：

$(document).ready(function () {

    $('#myform').validate({ // initialize the plugin
        rules: {
            field1: {
                required: true,
                email: true
            },
            field2: {
                required: true,
                minlength: 5
            }
        }
    });

});

<强> HTML：

<form id="myform">
    <input type="text" name="field1" />
    <input type="text" name="field2" />
    <input type="submit" />
</form>

Answer 5

没有使用startValidate功能。只需删除它。
您的表单标记应为<form name="orderForm" method="post" onsubmit="return validateForm();" action="processForm.html">
将此用作提交按钮，<input type="submit" name="btnSubmit" id="btnSubmit" value="Submit Order"> //＆lt; - 删除onsubmit =＆＃34; startValidate（）＆＃34;因为这不是必需的。

最重要的是，只需在发布此处之前验证您的HTML。

警报未显示在我的HTML代码中

5 个答案: