Wie kann ich meinen Fehler in meinem reservierten Bereich veröffentlichen lassen?

Im reservierten Bereich möchte ich Fehler anzeigen, die angezeigt werden, wenn bei der Eingabe etwas nicht stimmt. Eine Voraussetzung, die ich habe, ist, dass es einen gewissen Wert im Vornamen geben muss. Wenn kein Wert vorhanden ist, sollte innerhalb von reserviert "Name muss ausgefüllt sein" angezeigt werden. Wie kann ich meinen Fehler in meinem reservierten Bereich veröffentlichen lassen?

Im Moment habe ich eine Warnung, die angezeigt wird, wenn der Name nicht ausgefüllt ist.

Wie kann ich meine Fehler im Abschnitt "Reserved" veröffentlicht werden?

JS:

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

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

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>

Quelle

2016-08-06 Asad Mahmood

Wie Sie HTML5 verwende ich die Javascript Constraint Validation API empfohlen und erforderlich und Muster-Attribute für die Eingabeelemente. Die Constraint Validation API ist natives HTML5/Javascript. Mit der API können Sie reagieren und alle Fehler anzeigen, wo Sie wollen. – Marcel

Option 1: Sie können die "erforderlich" Eigenschaft auf Ihrer Eingabe verwenden.
Option 2:

1- einen div mit Stil erstellen = "display: none", wo immer Sie in Ihrem dom mögen und eine ID zu diesem div zuweisen. IE:

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

2- In Ihrem Javascript, auf Fehler:

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

    return false; 
}

Quelle

2016-08-06 18:33:49 TestCandidate

Wenn ich Sie richtig verstehe, fügen Sie einfach ein <span> Element zu Ihrer <section class="s">. Geben Sie der Spanne ein id wie ‚err_log‘ oder nur ‚err‘ und verwenden diese den Fehler

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=''; 
    } 
}

ausgeben Wenn Sie anzeigen möchten und mehrere Fehler zu löschen, können Sie einfach erstellen für jeden Fehler auf Spanne und tun oben um sie zu benutzen.

this helps :)

Quelle

2016-08-06 18:30:17 RPaul

Wie kann ich meinen Fehler in meinem reservierten Bereich veröffentlichen lassen?

Antwort

Verwandte Themen