On change through <select> validate visible inputs JS

Question

I have this code, tried some but not working or I just have codes misplaced.

<script type="text/javascript">
    $(document).ready(function(){
    $('#fac').hide();//div fac
    $('#stud').hide();

    $("#thechoices").change(function(){

    $("#all").children().show();

    $("#" + this.value).show().siblings().hide();   


    });

    $("#thechoices").change();
    });

    **if ($('#stud:not(:visible)')){
        $("#myform").validate({
           ignore: ":hidden"**
        });
    }

    </script>

I want to have alternate required inputs. My goal to my form is to hide and show the inputs regarding with what position (Faculty Member or Student as select options) and store to the database. Different input fields that appears (with the same name for db purposes) for the Student and Faculty Member. However, when I choose Student (so Student input fields appear now and Faculty Member input fields are hidden), fill up the fields, and click Submit button, I can't proceed because the hidden fields (through JS and Select Tag) for faculty member are also required to be filled.

Here is my form:

<form name = "myform">
<label>Select Position</label>
            <select id="thechoices" name="position">        
                <option value="stud">Student</option>
                <option value="fac">Faculty Member</option>
            </select>
<div id = "all">    
    <div id="stud">
        <input type="text" id="name" name="name" placeholder="Name" pattern="[a-zA-Z]+" required/>
        <input type="text" name="id_num" size="8" placeholder="8-digits only"required />
        <input type="submit"  value='Borrow' class="button radius">
    </div>

    <div id="fac">
        <input type="text" id="name" name="name" placeholder="Name" pattern="[a-zA-Z]+" required/>
        <input type="text" name="id_num" size="8" placeholder="8-digits only"required />
        <input type="submit"  value='Borrow' class="button radius">
    </div>
</div>

What should be done? I am looking forward for a solution about this. Thank you so much in advance. It's been 4 hours that I've tried to solve my problem with the resources ( Here , Here etc.) I got but I don't know where to put those codes to work.

Answer 1

When you hide or show the inputs you could also change their "required" attribute:

When you hide the input do:

$("#my_input").removeAttr("required");

When you show the input do:

$("#my_input").attr("required","required");

In your code do this:

 $("#thechoices").change(function(){

    $("#all").children().show();

    $("#" + this.value).show().siblings().hide();

    var selection = this.value;   

     $("#" + this.value + "input").each(function()
      {
        $(this).attr("required","required");
      })

     $("#thechoices option").each(function()
      {
         if($(this).val()!=selection)
          {
             var id = $(this).val();
             $("#"+id+" input").each(function()
               {
                 $(this).removeAttr("required");   
               })
          }
       })

    });

Answer 2

I agree to cretzzzu3000. Also I would like to hide or show the related fields when selected. So that user don't have to worry about the remaining fields at all. Following is what i have tried.

$(document).ready(function(){
    $('select').on('change',function(){
        var selected = this.value,
            div_all = $(this).next('div'),
            selected_div = div_all.children('div#'+selected);

        div_all.find('input[type=text]').removeAttr('required');
        selected_div.find('input[type=text]').attr('required','required');
        selected_div.fadeIn().siblings('div').fadeOut();
    });
});

Hope that helps. Thanks.