2017-08-25 15 views
0

以下は、私が取り組んでいるプロジェクトの完全なコピーです。私は、フォームのJavaScript検証セクションと、JavaScriptが関数の最後にアラートを生成することに問題があります。JavaScriptのフォーム検証と警告の問題

アイデアは、あなたが18歳以上の場合はフォームの妥当性を検証することです。最初と最後のフィールドのみを入力する必要があります。しかし、あなたが18歳未満の場合は、保護者の詳細を検証する必要があります。

しかしこれまでの変更はうまくいきましたが、問題は数週間続きましたので、元に戻すことができるように変更が加えられたかどうかわかりません。理想的には、基本コードがあまり変更されない、私は同じ効果を持つ迅速な修正またはストップギャップ測定を探しています。

<html> 
    <head> 
     <meta charset="utf-8"> 
      <title>Work Field Trip Registration</title> 
       <script type="text/javascript"> 
        function HideReveal() { 

        if (document.getElementById("YesNo").selectedIndex == "1") { 
         document.getElementById("ifYes").style.display = "block"; 
         Required(); 
         //alert('1st Option Tested'); 
        } 
        else if (document.getElementById("YesNo").selectedIndex == "0") { 
         document.getElementById("ifYes").style.display = "none"; 
         Required(); 
         //alert('2nd Option Tested'); 
        } 
        } 

        function Required() { 

        if (document.getElementById("YesNo").selectedIndex == "1") { 
         AddRequirement(); 
         //alert("Step1"); 
        } 

        else { 
         NoRequirement(); 
         //alert("Step2"); 
        } 
        } 
        function NoRequirement() { 

        document.getElementById("GuardName").removeAttribute("required"); 
        document.getElementById("GuardPhone").removeAttribute("required"); 
         //alert("Step3"); 
        } 

        function AddRequirement() { 

        document.forms("death")("GuardianName").setAttribute("required", ""); 
        document.forms("death")("GuardianNumber").setAttribute("required", ""); 
         //alert("Step4"); 
        } 

        function validateForm() { 

        var a = document.forms("death")("GuardianName").value; 
        var b = document.forms("death")("GuardianNumber").value; 
        var c = document.forms("death")("FirstName").value; 
        var d = document.forms("death")("LastName").value; 

         if (document.getElementById("YesNo").selectedIndex == "1") 
         { 
          if (a == "" || b == "") { 
           alert("Please fill ALL required fields"); 
          } 

          else { 
           alert("Registration Complete!");  
          } 
         } 

         else if (c == "" || d == "") { 
           alert("Please fill ALL required fields") 
         } 

         else { 
          alert("Registration Complete!") 
         } 

        } 
       </script> 
     </head> 

    <body> 
     <h2>Work Field Trip Registration!</h2> 
     <h4>Please enter your details.</h4> 
     <form name="death"> 
       First Name:<br> 
      <input required type="text" name="FirstName"><br> 
       Last Name:<br> 
      <input required type="text" name="LastName"><br> 
       Gender:<br> 
       <select name="dMenu"> 
        <option>Male</option> 
        <option>Female</option> 
       </select><br><br> 
       Are you under 18? 
       <select id="YesNo" onChange="HideReveal()" name="dMenu"> 
        <option name="OptionNo" id="OptionNo" value="0">No</option> 
        <option name="OptionYes" id="OptionYes" value="1">Yes</option> 
       </select><br><br> 
     <div id="ifYes" style="display:none"> 
      Please enter your Parent/Guardian's name:<br> 
      <input type="text" id="GuardName" name="GuardianName"><br> 
      Please enter your Parent/Guardian's phone number:<br> 
      <input type="text" id="GuardPhone" name="GuardianNumber"><br> 
     </div> 
      <input onClick="validateForm()" type="submit" value="Submit"> 
     </form> 
    </body> 
</html> 
+0

質問の書式についてお詫び申し上げます。私はオーバーフローをスタックするのに慣れていませんし、要素やセグメントを設定する方法もまだありません。 –

答えて

0

1)既にフィールドを必須に設定している場合は、validateを呼び出す必要はありません。ブラウザがそれを処理します。 2. NoRequirement()では 'getElementbyId'を使用しましたが、AddRequirement()ではdocument.formsを使用した理由は不思議です。 ここにはコードの修正版があります。歓声

<html> 

    <head> 
     <meta charset="utf-8"> 
      <title>Work Field Trip Registration</title> 
       <script type="text/javascript"> 
        function HideReveal() { 

        if (document.getElementById("YesNo").selectedIndex == "1") { 
         document.getElementById("ifYes").style.display = "block"; 
         Required(); 
         //alert('1st Option Tested'); 
        } 
        else if (document.getElementById("YesNo").selectedIndex == "0") { 
         document.getElementById("ifYes").style.display = "none"; 
         Required(); 
         //alert('2nd Option Tested'); 
        } 
        } 

        function Required() { 

        if (document.getElementById("YesNo").selectedIndex == "1") { 
         AddRequirement(); 
         //alert("Step1"); 
        } 

        else { 
         NoRequirement(); 
         //alert("Step2"); 
        } 
        } 
        function NoRequirement() { 

        document.getElementById("GuardName").removeAttribute("required"); 
        document.getElementById("GuardPhone").removeAttribute("required"); 
         //alert("Step3"); 
        } 

        function AddRequirement() { 

         document.getElementById('GuardName').setAttribute("required","") 
         document.getElementById('GuardPhone').setAttribute("required","") 

         //alert("Step4"); 
        } 


       </script> 
     </head> 

    <body> 
     <h2>Work Field Trip Registration!</h2> 
     <h4>Please enter your details.</h4> 
     <form name="death"> 
       First Name:<br> 
      <input required type="text" name="FirstName"><br> 
       Last Name:<br> 
      <input required type="text" name="LastName"><br> 
       Gender:<br> 
       <select name="dMenu"> 
        <option>Male</option> 
        <option>Female</option> 
       </select><br><br> 
       Are you under 18? 
       <select id="YesNo" onChange="HideReveal()" name="dMenu"> 
        <option name="OptionNo" id="OptionNo" value="0">No</option> 
        <option name="OptionYes" id="OptionYes" value="1">Yes</option> 
       </select><br><br> 
     <div id="ifYes" style="display:none"> 
      Please enter your Parent/Guardian's name:<br> 
      <input type="text" id="GuardName" name="GuardianName"><br> 
      Please enter your Parent/Guardian's phone number:<br> 
      <input type="text" id="GuardPhone" name="GuardianNumber"><br> 
     </div> 
      <input type="submit" value="Submit"> 
     </form> 
    </body> 
</html> 
+0

ポインタをありがとうが、残念ながら、これは登録を完了するためのアラートに役立たなかった。検証機能の目的は、必要なすべてのフィールドがチェックされた後に警告/メッセージを表示し、セレクタ変数に基づいて必要なフィールドのみが検証されるようにすることです。 –

関連する問題