入力テキスト、ラジオ、選択ボックスがすべて入力されているかどうかを確認します。

Question

2つのセクションを持つフォームがあります。 最初のセクションには、テキストフィールド、ラジオボタン、選択ボックスがあります。 2番目のセクションにはテキストフィールドのみがあります。 ページが読み込まれたときに2番目のセクションを無効にしました。ページが読み込まれたときに最初のセクションのみを表示しています。 最初のセクションにすべてのフィールドが入力されている場合にのみ、2番目のセクションを表示します。このために私はjqueryのコードを使用するが、これは無線タイプと選択ボックスのために働いていません。

$('.profile-user-personal-form input[type="text"], .profile-user-personal-form input[type="radio"], .profile-user-personal-form select, .profile-user-personal-form input[type="password"]').bind('keyup',function(){ 

     // get elements that are empty. 
     var empty = $('.profile-user-personal-form input[type="text"], .profile-user-personal-form input[type="password"], .profile-user-personal-form input[type="radio"], .profile-user-personal-form select').map(function(index, el) { 
      return !$(el).val() ? el : null; 

     }).get(); 

     // could also be placed outside of the function 
     var number = $('.user-leaving-info'); 


     // check if there are any empty elements, if there are none, show numbers, else hide number. 
     !empty.length ? number.css({'opacity': 1, 'pointer-events':'auto'}) : number.css({ 
       'opacity': 0.2, 
       'pointer-events' : 'none', 
     }); 
     !empty.length ? $('html , body').animate({ 
      scrollTop: $(".user-leaving-info").offset().top 
     }, 1000) : ""; 

    }); 

私のHTMLコードは次のようになります。

<div class="profile-user-personal-form"> 
    <div class="form-group mr-30"> 
     <label>First Name</label> 
     <div class="form_control field-user-first_name required"> 
      <input type="text" id="user-first_name" class="form-control first_name" name="User[first_name]" value=""> 
     </div>  
    </div> 
    <div class="form-group"> 
     <label>Last Name</label> 
     <div class="form_control field-user-last_name required"> 
      <input type="text" id="user-last_name" class="form-control last_name" name="User[last_name]" value=""> 
     </div>  
    </div> 

    <div class="form-group full-width"> 
     <h6>I am a : </h6> 
     <div class="radio-inline field-user-gender required"> 

      <input type="hidden" name="User[gender]" value=""> 
       <div id="user-gender"> 
        <label class="radio-inline "> 
         <input type="radio" class="genderName" name="User[gender]" value="Male">male 
        </label> 
        <label class="radio-inline "> 
         <input type="radio" class="genderName" name="User[gender]" value="Female">female 
        </label> 
       </div> 
     </div>  
    </div> 

    <div class="form-group full-width"> 
     <h6>Birthday</h6> 
     <div class="select-box-styling"> 
      <div class="form-group field-user-month"> 
       <select id="user-month" class="form-control month" name="User[month]"> 
        <option value="1">Jan</option> 
        <option value="2">Feb</option> 
        <option value="3">Mar</option> 
        <option value="4">Apr</option> 
        <option value="5">May</option> 
        <option value="6">Jun</option> 
        <option value="7">Jul</option> 
        <option value="8">Aug</option> 
        <option value="9">Sep</option> 
        <option value="10">oct</option> 
        <option value="11">Nov</option> 
        <option value="12">Dec</option> 
       </select> 
      </div>    
      <div class="form-group field-user-day"> 

       <select id="user-day" class="form-control day" name="User[day]"> 

        <option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option><option value="6">6</option><option value="7">7</option><option value="8">8</option><option value="9">9</option><option value="10">10</option><option value="11">11</option><option value="12">12</option><option value="13">13</option><option value="14">14</option><option value="15">15</option><option value="16">16</option><option value="17">17</option><option value="18">18</option><option value="19">19</option><option value="20">20</option><option value="21">21</option><option value="22">22</option><option value="23">23</option><option value="24">24</option><option value="25">25</option><option value="26">26</option><option value="27">27</option><option value="28">28</option><option value="29">29</option><option value="30">30</option><option value="31">31</option> 
       </select> 

      </div>    
      <div class="form-group field-user-year"> 

       <select id="user-year" class="form-control year" name="User[year]"> 
        <option value="1998">1998</option> 
        <option value="1997">1997</option> 
       </select> 
      </div>    
     </div> 
    </div> 
</div> 

誰も私のコードで問題を教えてくださいことはできますか？

Answer 1

2つのエラーが発生しました。1.ラジオ入力と選択ボックスは、変更時に'keyup'イベントに応答しません。あなたは'change'イベントが必要です。 2.ラジオでval()を呼び出すと常に値が返されますが、チェックされているかどうかはわかりませんが、jQueryの場合はis(':checked')です。このコードでコードを置き換えてください：

function checkFormFunction(){ 
    // get elements that are empty. 
    var empty = $('.profile-user-personal-form input[type="text"], .profile-user-personal-form input[type="password"], .profile-user-personal-form select').map(function(index, el) { 
     return !$(el).val() ? el : null; 
    }).get(); 

    //check if at least one radio is checked 
    var isChecked = $('.profile-user-personal-form input[type="radio"]').is(":checked"); 

    // could also be placed outside of the function 
    var number = $('.user-leaving-info'); 

    // check if there are any empty elements, a checked radio, if there are none, show numbers, else hide number. 
    isChecked && !empty.length ? number.css({'opacity': 1, 'pointer-events':'auto'}) : number.css({ 
     'opacity': 0.2, 
     'pointer-events' : 'none', 
    }); 
    isChecked && !empty.length ? $('html , body').animate({ 
     scrollTop: $(".user-leaving-info").offset().top 
    }, 1000) : ""; 
} 

$('.profile-user-personal-form input[type="text"], .profile-user-personal-form input[type="password"]').bind('keyup', checkFormFunction); 
$('.profile-user-personal-form input[type="radio"], .profile-user-personal-form select').bind('change', checkFormFunction);