JavaScript HTML - ユーザーに表示される余分な必須フォームフィールド

Question

ユーザーがドロップダウンから「はい」を選択すると、2つの追加フィールドが表示されるフォームを作成しようとしています。これらのフィールドは両方とも必要であり、そのうちの1つは 'コード'の配列に従って検証する必要があります。ユーザーは、フォームが正しく送信されるためには配列のコードの1つを入力する必要があります。ただし、ユーザーがドロップダウンから「いいえ」を選択した場合、これらのフィールドは表示されず、必須でもありません。ではなくが発生し、フォームを送信できます。

私はこのためにいくつかのコードを持っていますが、フィールドを表示することはできません。私がこれで遭遇した以前の問題（配列検証を除いて - コードを破って余分なフィールドが表示されなくなったことを含む）は、ユーザーが「はい」を選択してから心を変えて「いいえ」を選択した場合フォームは提出されず、入力されるフィールドが正確に入力されている必要があります/入力された正しい配列値。

誰でもこの作品を作るのを手伝ってもらえると大変感謝しています。

HTML：

<form id="form" method="post" action="action.php"> 

    <div class="form-group"> 
    <label class="control-label">Defect?</label> 
    <select onclick='checkIfYes()' class="select form-control" id="defect" name="defect"> 
     <option id="No" value="No">No</option> 
     <option id="Yes" value="Yes">Yes</option> 
    </select> 
    </div> 

    <div id="extra" name="extra" style="display: none"> 

    <label class="control-label" for="desc">Description</label> 
    <input class="form-control" type="text" id="desc" name="desc" required disabled> 

    <label class="control-label" for="auth_by">Authorised By</label> 
    <input class="form-control" type="text" id="auth_code_input" name="auth_by" required disabled> 

    </div> 

    <hr> 

    <div class="form-group"> 
    <button class="btn btn-info" id="submit" name="submit" type="submit">Submit 
    </button> 
    </div> 

</form> 

JavaScriptを：それはあなたが関数を定義する方法でグリッチが

$(document).ready(function() { 

    checkIfYes = function checkIfYes() { 
     if (document.getElementById('defect').value == 'Yes') { 

      // show extra fields & make them required 
      document.getElementById('extra').style.display = ''; 
      document.getElementById('auth_code_input').disabled = false; 
      document.getElementById('desc').disabled = false; 

      // show user if their input is one of the codes in the array when leaving field 
      $('#auth_code_input').blur(function() { 
      if (!ValidateInput()) { 
       e.preventDefault(); 
      } 
      }); 
      // prevent form submission if input is not one of the codes in the array 
      $('#auth_form').on('submit', function(e) { 
      if (!ValidateInput()) { 
       e.preventDefault(); 
      } 
      }); 

      function ValidateInput() { 
      var codes = ['Foo', 'Bar']; // user must enter one of these 
      var IsValid = false; 
      var input = $('#auth_code_input').val() 

      if (codes.indexOf(input) > -1) { // if input equals one of the codes in the array 
       $('#iconBad').removeClass('glyphicon-remove').addClass('glyphicon-ok'); 
       IsValid = true; 
      } else { 
       $('#iconBad').removeClass('glyphicon-ok').addClass('glyphicon-remove'); 
       IsValid = false; 
      } 

      return IsValid; 
      } 

     } else { // hide and disable extra fields so form can submit 
      document.getElementById('extra').style.display = 'none'; 
      document.getElementById('auth_code_input').disabled = true; 
      document.getElementById('desc').disabled = true; 
     } 
     } 
    }); 

JSFiddle

Answer 1

だ - それはそれを探している）（checkIfYesを呼び出すことにより、グローバル（ウィンドウの）スコープでこれに

function checkIfYes() {... 

：行を変更することにより

checkIfYes = function() {... 

あなたがグローバルスコープにそれを持っています。ところで、それは悪い習慣です。 HTML内の関数呼び出しをハードコードするよりも、スクリプト自体にクリックハンドラを作成する方がよいでしょう。しかし、それは私だけです。

いくつかの変更が加えられました。かなり重要です - まず、checkIfYesへのハードコーディングされた参照を削除し、単純にイベントをjavascriptに入れました。二番目（かなり重要です）、イベントハンドラをcheckIfYes関数で定義するのではなく、javascriptのルートに移動しました。このように、彼らは毎回呼ばれることに依存しません。それを試して、それは動作します。

$(document).ready(function() { 
 

 
    /** 
 
    * Define some custom events to handle... 
 
    **/ 
 
     $("#defect").on("change", checkIfYes); 
 
    // show user if their input is one of the codes in the array when leaving field 
 
     $('#auth_code_input').blur(function() { 
 
     if (!ValidateInput()) { 
 
      console.log("Input is wrong!"); 
 
     } 
 
     }); 
 
     // prevent form submission if input is not one of the codes in the array 
 
     $('#auth_form').on('submit', function(e) { 
 
     e.preventDefault(); 
 
     console.log("This is where I would be checking..."); 
 
     if (ValidateInput()) { 
 
      $("#auth_form").submit(); 
 
     } 
 
     }); 
 
    
 
    
 
    // Utility Functions. 
 
    function checkIfYes() { 
 
    if (document.getElementById('defect').value == 'Yes') { 
 

 
     // show extra fields & make them required 
 
     document.getElementById('extra').style.display = ''; 
 
     document.getElementById('auth_code_input').disabled = false; 
 
     document.getElementById('desc').disabled = false; 
 

 
    } else { // hide and disable extra fields so form can submit 
 
     document.getElementById('extra').style.display = 'none'; 
 
     document.getElementById('auth_code_input').disabled = true; 
 
     document.getElementById('desc').disabled = true; 
 
    } 
 
    } 
 
    
 
     function ValidateInput() { 
 
     var codes = ['Foo', 'Bar']; // user must enter one of these 
 
     var IsValid = false; 
 
     var input = $('#auth_code_input').val() 
 

 
     if (codes.indexOf(input) > -1) { // if input equals one of the codes in the array 
 
      $('#iconBad').removeClass('glyphicon-remove').addClass('glyphicon-ok'); 
 
      IsValid = true; 
 
     } else { 
 
      $('#iconBad').removeClass('glyphicon-ok').addClass('glyphicon-remove'); 
 
      IsValid = false; 
 
     } 
 

 
     return IsValid; 
 
     } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form id="form" method="post" action="action.php"> 
 

 
    <div class="form-group"> 
 
    <label class="control-label">Defect?</label> 
 
    <select class="select form-control" id="defect" name="defect"> 
 
     <option id="No" value="No">No</option> 
 
     <option id="Yes" value="Yes">Yes</option> 
 
    </select> 
 
    </div> 
 

 
    <div id="extra" name="extra" style="display: none"> 
 

 
    <label class="control-label" for="desc">Description</label> 
 
    <input class="form-control" type="text" id="desc" name="desc" required disabled> 
 

 
    <label class="control-label" for="auth_by">Authorised By</label> 
 
    <input class="form-control" type="text" id="auth_code_input" name="auth_by" required disabled> 
 

 
    </div> 
 

 
    <hr> 
 

 
    <div class="form-group"> 
 
    <button class="btn btn-info" id="submit" name="submit" type="submit">Submit 
 
    </button> 
 
    </div> 
 

 
</form>