required field on show/hide div base on drop down

required field on show/hide div base on drop down

Hi, I have drop down field to show hidden div (that has field) when he/she selects the "OTHERS" value. It works fine, But, I want it the user to type something in the field (that has required) before she/he submits the form.

here's my script

  1.      <script text="text/javascript">  
  2.         $(function() {
  3.             $('#customer_id').on('change',function(){
  4.                 if( $(this).val()==="Others"){
  5.                      $("#other_valid_id").show()
  6.                 }
  7.                 else{
  8.                      $("#other_valid_id").hide()
  9.                 }
  10.             });
  11.         });
  12.      </script>


html

  1.                                     <div class="span3">
                                            <label for="customer_id"> ID presented</label>
                                            <select class="form-control" name="customer_id" id="customer_id">
                                                  <option selected="A">ID A</option>
                                                  <option value="B">ID B</option>
                                                  <option value="C">ID C</option>
                                                  <option value="Others">Others</option>
                                            </select>
                                         </div> 

                                         <div id="other_valid_id" class="span3" style="display:none"> 
                                                <label for="customer_other_valid_id">Other Valid ID</label>
                                                <input class="form-control" name="customer_other_valid_idnumber" id="customer_idnumber" type="text" placeholder="Type other valid ID" required="true" autocomplete="off"/>
                                         </div>  


Thanks