如何使我的错误发布在我的保留部分中？

Question

In the reserved area I wish to show errors that will show up if something doesn't go right with input. 在保留区域中，我希望显示一些错误，如果输入内容不正确，则会显示错误。 One prerequisite I have is that there must be some value within first name. 我的一个先决条件是名字中必须有一些值。 If there is no value, within reserved should show "Name must be filled out". 如果没有值，则保留内应显示“必须填写名称”。

As of right now I have an alert that shows up if the name is not filled out. 截至目前，如果没有填写姓名，我将显示一条警报。

How can I make my errors be posted within the "Reserved" section? 如何使我的错误发布在“已保留”部分中？

JS: JS：

function validateForm()
{
    var x = document.forms["application"]["fName"].value;

    if (x == null || x == "")
    {
        alert("Name must be filled out");
        return false;
    }
}

HTML: HTML：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <title>int222_162d16 - Assignment 3 - Home Page</title>
        <link rel="stylesheet" href="css/normalize.css"   type="text/css" media="screen" /> 
        <link rel="stylesheet" href="css/sitecss.css" type="text/css" media="screen" /> 
        <script src='javascript/myscript.js' type='text/javascript'></script>
    </head>
    <body>
        <form name="application" id="application" method="post" action="https://zenit.senecac.on.ca/~emile.ohan/cgi-bin/cardApplication.cgi" onsubmit="return validateForm();">
        <fieldset>
        <legend class="t"><img src="https://zenit.senecac.on.ca/~emile.ohan/int222/bank-logo.png" alt="Assignment #3" />Seneca Bank - Credit Card Application</legend>

          <div class="clearfix">
            <aside class="l"> 
            <fieldset>
            <legend>Primary Applicant's Information</legend>

            <table>
              <tr>
                  <td>First Name*</td>    
                  <td><input type="text" name="fName" id="fName" size="20" maxlength="20" autofocus="autofocus" ></td>
              </tr>
              <tr>
                  <td>Surname*</td>
                  <td><input type="text" name="sName" id="sName" size="20" maxlength="30"></td>
              </tr>
              <tr>
                  <td>Date of Birth*</td>    
                  <td><input type="text" name="dob" id="dob" size="10" placeholder="MMMYYYY" maxlength="7"></td>
              </tr>
              <tr>
                  <td>Email Address*</td>    
                  <td><input type="text" name="email" id="email" size="20" maxlength="60"></td>
              </tr>
              <tr>
                  <td>Phone No.*</td>    
                  <td><input type="text" name="phone" id="phone" size="20" maxlength="12"></td>
              </tr>
            </table>
            </fieldset>
            </aside>

            <section class="s">
            <fieldset>
            <legend>Primary Applicant's Address</legend>
            <table>

                <tr>
                    <td>Home Address*</td>
                    <td>Apt.</td>
                </tr>
                <tr>
                    <td><input type="text" name="address" id="address" size="30" maxlength="60"></td>
                    <td><input type="text" name="apt" id="apt" size="5" maxlength="4"></td>
                </tr>

                <tr>
                    <td><br />City* </td>
                </tr>
                <tr>
                    <td><input type="text" name="city" id="city" size="20" maxlength="40">
                </tr>
                <tr>
                    <td><br />Province*</td>
                    <td><br />Postal Code</td>
                </tr>
                <tr>
                    <td>
                        <select id="province" name="province" size="2">
                            <optgroup label="Province">
                                <option value="Alberta">Alberta</option>
                                <option value="British Columbia">British Columbia</option>
                                <option value="Manitoba">Manitoba</option>
                                <option value="New Brunswick">New Brunswick</option>
                                <option value="Newfoundland & Labrador">Newfoundland & Labrador</option>
                                <option value="Nova Scotia">Nova Scotia</option>
                                <option value="Ontario">Ontario</option>
                                <option value="Prince Edward Island">PE</option>
                                <option value="Quebec">Quebec</option>
                                <option value="Saskatchewan">Saskatchewan</option>
                            </optgroup>
                            <optgroup label="Territory">
                                <option value="Northwest Territories">Northwest Territories</option>
                                <option value="Nunavut">Nunavut</option>
                                <option value="Yukon">Yukon</option>
                            </optgroup>
                        </select>
                    </td>
                    <td>
                        <input type="text" name="postal" id="postal" size="8" maxlength="7" placeholder="ANA NAN">
                    </td>
                </tr>
            </table>
            </fieldset>
            </section>

            <aside class="r">
            <fieldset>
            <legend>Housing Status</legend>

            <table>
                <tr>
                    <td>Do you:</td>
                    <td>$Monthly Payment*  </td>
                </tr>
                <tr>
                    <td><input type="checkbox" name="hStatus" id="s01" value="Own" />Own the property</td>

                    <td><input type="text" name="payment" id="payment" size="8" maxlength="6"></td>
                </tr>
                <tr>
                    <td><input type="checkbox" name="hStatus" id="s02" value="Rent" />Rent the property</td>
                </tr>
                <tr>
                    <td>Monthly Income*</td>
                    <td><input type="text" name="income" id="income" size="8" maxlength="6"></td>
                </tr>
                <tr>
                    <td>Years at current location*</td>
                    <td><input type="text" name="currYears" id="currYears" size="3" maxlength="2"></td>
                </tr>
                <tr>
                    <td>Pre-authorized Code*</td>
                    <td><input type="text" name="preCode" id="preCode" size="8"></td>
                </tr>
            </table>
            </fieldset>
            </aside>
          </div>

          <div class="clearfix">
            <section class="s">
                <fieldset>
                <legend>Reserved - See below</legend>
                    <p><b>If you submit your application with errors and/or omissions, a list of errors and/or omissions will show here. Make the corrections and re-submit.</b></p>
                    <p><b>If you continue to have a problem submitting your application, make a note of the Reference No. and call us at 1-800-010-2000.</b></p>

                    <script>document.write</script>
                </fieldset>
            </section>

            <aside class="l">
            <fieldset>
            <legend>Credit Check / Email Consent</legend>
                <p><b>I consent to have a credit check performed</b></p>
                <input type="checkbox" class="BoxCheck" name="creditCheck" id="c01" value="Yes" onclick="check(this);" />Yes
                <input type="checkbox" class="BoxCheck" name="creditCheck" id="c02" value="No"  onclick= "check(this);" />No
                <br />                                         

                <p><b>I consent to have email messages sent to me</b></p>
                <input type="radio" name="emailConsent" id="m01" value="Yes" />Yes
                <input type="radio" name="emailConsent" id="m02" value="No" />No
                <br />                                         
                Submitted on:

                <script>
                    var d = new Date();
                    document.write(d.toDateString());
                </script>

                &ensp; &ensp; Ref. #                    <input type="text" name="refNo" id="refNo" size="8" readonly="readonly"> <br />
                <!--Submit Application--> <input type="submit" value="Submit Application">
                <!--Start Over-->         <input type="reset" value="Start Over">
                                          <input type="hidden" name="hName" id="hName" value="Mahmood"> <br />
                                          <input type="hidden" name="hId" id="hId" value="int222_162d16"> <br />
            </fieldset>
            </aside>

          </div>



        </fieldset>
        </form>


        <footer class=f>
            <a href="../">My zenit Account</a>   <a href="javascript/">My JavaScript</a>   <a href="css/">My CSS</a>   <a href="honesty.html">My Honesty</a> 
            <script>
                var dt=new Date(document.lastModified);   // Get document last modified date
                document.write('<p>This page was last updated on '+dt.toLocaleString()) + '</p>';
            </script>
        </footer>
    </body>
</html>

Answer 1

If I understand you correctly, just add a <span> element to your <section class="s"> . 如果我对您的理解正确，只需在<section class="s">添加<span>元素。 Give the span an id like 'err_log' or just 'err' and use this to output the error 给跨度一个ID，例如“ err_log”或“ err”，并使用它来输出错误

function validateForm()
{
    var x = document.forms["application"]["fName"].value;

    if (x == null || x == "")
    {
        alert("Name must be filled out");
        document.getElementById('youridofthespan').innerHTML='Name must be filled out';
        return false;
    }else{
        document.getElementById('youridofthespan').innerHTML='';
    }
}

If you want to show and delete multiple errors, you can simply create on span for every error and do above to use them. 如果要显示和删除多个错误，则可以简单地为每个错误创建跨度，然后执行以上操作以使用它们。

Hope this helps :) 希望这可以帮助：）

Answer 2

Option 1: You can use the "required" property on your input. 选项1：您可以在输入中使用“必需”属性。
Option 2: 选项2：

1- Create a div with style="display:none" where ever you like in your dom and assign an ID to that div. 1-创建一个样式为style =“ display：none”的div，并将其分配给该div一个ID。 IE: IE浏览器：

<div id="err1" style="display:none"></div>

2- In your javascript, on error: 2-在您的JavaScript中，出现错误：

if (x == null || x == "")
{
    var errDiv = document.getElementById("err1");
    errDiv.innerHTML = "Please fill input";
    errDiv.style.display = 'block';

    return false;
}

如何使我的错误发布在我的保留部分中？

问题描述

2 个解决方案

解决方案1
1 2016-08-06 18:30:17

解决方案2
1 已采纳 2016-08-06 18:33:49

如何使我的错误发布在我的保留部分中？

问题描述

2 个解决方案

解决方案1 1 2016-08-06 18:30:17

解决方案2 1 已采纳 2016-08-06 18:33:49

解决方案1
1 2016-08-06 18:30:17

解决方案2
1 已采纳 2016-08-06 18:33:49