Semantic UI validation is not working on dropdown and checkbox with array of fields

I am using semantic UI. I am getting the issue in the country drop-down and checkbox validations. Drop-down validation is showing but after few second page is redirecting to process page.

I have multiple checkboxes but Validation is not working. The user should choose at least one checkbox.

Please check my code and assist me where I am wrong.

        $('#select_country').dropdown();
        $('.ui.checkbox').checkbox();


        $('.ui.form')
  .form({
    country: {
      identifier  : 'country',
      rules: [
        {
          type   : 'empty',
          prompt : 'Please select your Country'
        }
      ]
    },
    product: {
      identifier : 'product',
      rules: [
        {
          type   : 'checked',
          prompt : 'Select your type'
        }
      ]
    }
  });

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
   <link rel="stylesheet" type="text/css" href="https://oss.maxcdn.com/semantic-ui/2.1.4/semantic.min.css">
   
 <form action="process.php" method="post" class="ui form segment">
 <div class="col-md-12">
 <div class="field">
 <label>Select Country</label>
  <div class="ui fluid search selection dropdown" id="select_country">
  <input type="hidden" name="country">
  <i class="dropdown icon"></i>
  <div class="default text">Select Country</div>
  <div class="menu">
  <div class="item" data-value="af"><i class="af flag"></i>Afghanistan</div>
  <div class="item" data-value="ax"><i class="ax flag"></i>Aland Islands</div>
  <div class="item" data-value="al"><i class="al flag"></i>Albania</div>
  <div class="item" data-value="dz"><i class="dz flag"></i>Algeria</div>
  <div class="item" data-value="as"><i class="as flag"></i>American Samoa</div>
  <div class="item" data-value="ad"><i class="ad flag"></i>Andorra</div>
</div>

 </div>
</div>

</div>


        <div class="col-md-12">
        <div class="field">
 <label>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do</label>

<div class="col-md-6 padding-0">
  
    <div class="ui checkbox">
        <label for="checkbox_1">consectetur adipisicing</label>
      <input type="checkbox" id="checkbox_1" class="hidden" name="product[]" value="consectetur adipisicing">
    </div>

    <div class="ui checkbox">
      <input type="checkbox" tabindex="0" class="hidden" name="product[]" value="consectetur adipisicing">
      <label>consectetur adipisicing</label>
    </div>
  
    <div class="ui checkbox">
      <input type="checkbox" tabindex="0" class="hidden" name="product[]" value="consectetur adipisicing">
      <label>consectetur adipisicing</label>
    </div>
  
</div><!--col-->

<div class="col-md-6 padding-0">
            <div class="ui checkbox">
              <input type="checkbox" tabindex="0" class="hidden" name="product[]" value="consectetur adipisicing">
              <label>consectetur adipisicing</label>
            </div>
          
    <div class="ui checkbox">
              <input type="checkbox" tabindex="0" class="hidden" name="product[]" value="consectetur adipisicing">
              <label>consectetur adipisicing</label>
            </div>

            <div class="ui checkbox">
              <input type="checkbox" tabindex="0" class="hidden" name="product[]" value="consectetur adipisicing">
              <label>consectetur adipisicing</label>
            </div>
        
</div><!--col-->
</div>


</div><!--col 12-->


         <input class="ui black submit button" type="submit" name="submit" value="Submit"/>
       </form>


<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="http://oss.maxcdn.com/semantic-ui/2.1.4/semantic.min.js"></script>