title: Semantic UI Form Validation with Dynamic Dropdowns
body: <p>I am building a dynamic form that requires dropdowns to be rebuilt and validated. I have found that I can rebuild a dropdown using the "setup menu" option however when I then re-initialize the validation for the form it throws an error that it is empty even when a value is selected.</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;form class="ui form"&gt;
    &lt;div class="required field"&gt;
      &lt;label for="gender"&gt;Dynamic Dropdown&lt;/label&gt;
      &lt;select name="dropdown" class="ui dropdown" id="select"&gt;
        &lt;option value=""&gt;Gender&lt;/option&gt;
        &lt;option value="male"&gt;Male&lt;/option&gt;
        &lt;option value="female"&gt;Female&lt;/option&gt;
      &lt;/select&gt;
    &lt;/div&gt;
    &lt;div class="ui divider"&gt;&lt;/div&gt;
    &lt;div class="ui submit button"&gt;Submit&lt;/div&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p><strong>JavaScript</strong></p>
  
  <pre><code>function form_init() {
    $(".ui.form").form({
      inline: true,
      on: 'submit',
      fields: {
          dropdown: {
            identifier  : 'dropdown',
            rules: [
              {
                type   : 'empty',
                prompt : 'Please enter a value'
              }
            ]
          }
      }
    });
  
    $(".ui.form").find(".ui.dropdown").dropdown();
  }
  
  arr = [
      {id: 1, name: "Bob"},
      {id: 2, name: "Barb"}
  ];
  options = [];
  
  for (var i = 0; i &lt; arr.length; i++ ) {
      options.push({
      value: arr[i].id,
      text: arr[i].name,
      name: arr[i].name
    })
  }
  
  $("#select").dropdown('setup menu', {values: options});
  
  form_init();
  </code></pre>
  
  <p>I have built a JsFiddle here <a href="https://jsfiddle.net/booshwa/mjuL6tvL/2/" rel="nofollow noreferrer">https://jsfiddle.net/booshwa/mjuL6tvL/2/</a></p>
  
  <p>Any help is much appreciated, not sure if this is a bug or I am missing something.</p>