title: Using Semantic-UI stylized select element with jQuery Validation
body: <p>I have jQuery Validation setup for a two-step form, and the form is validating as expected with errors under each input and select menu from the first screen to the second screen with the submit button.</p>
  
  <p>However, when I enable the Semantic-UI Dropdown Module to style my select menus in the form, the select menu styles as expected, but is no longer showing an error even if marked as required.</p>
  
  <p>Here's the initial markup:</p>
  
  <pre><code>&lt;form id="signup" action="" method="post" name="signup"&gt;
  &lt;!-- Step 1 Screen --&gt;
  &lt;div class="step-1-view"&gt;
      &lt;span class="step"&gt;Step 1 of 2&lt;/span&gt;
      &lt;div class="name"&gt;
          &lt;input type="text" name="firstname" id="firstname" placeholder="First Name"&gt;
          &lt;input type="text" name="lastname" id="lastname" placeholder="Last Name"&gt;
      &lt;/div&gt;
      &lt;div class="email"&gt;
          &lt;input type="text" name="email" id="email" placeholder="Email"&gt;
      &lt;/div&gt;
      &lt;div class="specialty"&gt;
          &lt;select name="specialty" class="ui dropdown" id="specialty"&gt;
              &lt;option value="" disabled selected&gt;Choose Specialty&lt;/option&gt;
              &lt;option value="1"&gt;Option 1&lt;/option&gt;
              &lt;option value="1"&gt;Option 2&lt;/option&gt;
              &lt;option value="1"&gt;Option 3&lt;/option&gt;
              &lt;option value="1"&gt;Option 4&lt;/option&gt;
              &lt;option value="1"&gt;Option 5&lt;/option&gt;
          &lt;/select&gt;
      &lt;/div&gt;
      &lt;div class="buttons-wrap"&gt;
          &lt;a class="clear" href="#"&gt;Clear&lt;/a&gt;
          &lt;a class="next" href="#"&gt;Next&lt;/a&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;!-- / Step 1 Screen --&gt;
  &lt;!-- Step 2 Screen --&gt;
  &lt;div class="step-2-view"&gt;
      &lt;span class="step"&gt;Step 2 of 2&lt;/span&gt;
      &lt;div class="zip"&gt;
          &lt;input type="text" name="zip" id="zip" placeholder="Zip Code"&gt;
      &lt;/div&gt;
      &lt;div class="role"&gt;
          &lt;select name="role" class="ui dropdown" id="role"&gt;
              &lt;option value="" disabled selected&gt;Role&lt;/option&gt;
              &lt;option value="1"&gt;Option 1&lt;/option&gt;
              &lt;option value="1"&gt;Option 2&lt;/option&gt;
              &lt;option value="1"&gt;Option 3&lt;/option&gt;
              &lt;option value="1"&gt;Option 4&lt;/option&gt;
              &lt;option value="1"&gt;Option 5&lt;/option&gt;
          &lt;/select&gt;
      &lt;/div&gt;
      &lt;div class="buttons-wrap"&gt;
          &lt;a class="back" href="#"&gt;Back&lt;/a&gt;
          &lt;button class="send"&gt;Send&lt;/button&gt;
      &lt;/div&gt;
      &lt;label id="success" class="success"&gt;Thank you for signing up!&lt;/label&gt;
  &lt;/div&gt;
  &lt;!-- / Step 2 Screen --&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>In the browser, Semantic-UI modifies the markup for a the select/dropdown:</p>
  
  <pre><code>&lt;div class="specialty"&gt;
  &lt;div class="ui dropdown selection" tabindex="0"&gt;
      &lt;select name="specialty" id="specialty"&gt;
          &lt;option value="" disabled="" selected=""&gt;Choose Specialty&lt;/option&gt;
          &lt;option value="1"&gt;Option 1&lt;/option&gt;
          &lt;option value="1"&gt;Option 2&lt;/option&gt;
          &lt;option value="1"&gt;Option 3&lt;/option&gt;
          &lt;option value="1"&gt;Option 4&lt;/option&gt;
          &lt;option value="1"&gt;Option 5&lt;/option&gt;
      &lt;/select&gt;
      &lt;i class="dropdown icon"&gt;&lt;/i&gt;
      &lt;div class="default text"&gt;Choose Specialty&lt;/div&gt;
      &lt;div class="menu" tabindex="-1"&gt;
          &lt;div class="item" data-value="1"&gt;Option 1&lt;/div&gt;
          &lt;div class="item" data-value="1"&gt;Option 2&lt;/div&gt;
          &lt;div class="item" data-value="1"&gt;Option 3&lt;/div&gt;
          &lt;div class="item" data-value="1"&gt;Option 4&lt;/div&gt;
          &lt;div class="item" data-value="1"&gt;Option 5&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p>Here are the rules in my form validation script:</p>
  
  <pre><code>  rules: {
      firstname: "required",
      lastname: "required",
      email: {
        required: true,
        //email: true
        validate_email: true // Custom, from new method
      },
      specialty: {
        required: true
      },
      role: {
        required: true
      },
      zip: {
        required: true,
        digits: true,
        minlength: 5,
        maxlength: 5
      }
    }
  </code></pre>
  
  <p>"Specialty" and "Role" from the select menus are being called, but not working when Semantic-UI is enabled. </p>
  
  <p>Error labels attaching to "Name" and "Email" non-Semantic-UI elements (from the browser):</p>
  
  <pre><code>&lt;div class="name"&gt;
      &lt;input type="text" name="firstname" id="firstname" placeholder="First Name" class="error"&gt;
      &lt;label id="firstname-error" class="error" for="firstname"&gt;Please enter your first name&lt;/label&gt;
      &lt;input type="text" name="lastname" id="lastname" placeholder="Last Name" class="error"&gt;
      &lt;label id="lastname-error" class="error" for="lastname"&gt;Please enter your last name&lt;/label&gt;
  &lt;/div&gt;
  &lt;div class="email"&gt;
      &lt;input type="text" name="email" id="email" placeholder="Email" class="error"&gt;
      &lt;label id="email-error" class="error" for="email"&gt;Please provide a valid email address&lt;/label&gt;
  &lt;/div&gt;
  &lt;div class="specialty"&gt;
      &lt;div class="ui dropdown selection" tabindex="0"&gt;
          &lt;select name="specialty" id="specialty"&gt;
              &lt;option value="" disabled="" selected=""&gt;Choose Specialty&lt;/option&gt;
              &lt;option value="1"&gt;Option 1&lt;/option&gt;
              &lt;option value="1"&gt;Option 2&lt;/option&gt;
              &lt;option value="1"&gt;Option 3&lt;/option&gt;
              &lt;option value="1"&gt;Option 4&lt;/option&gt;
              &lt;option value="1"&gt;Option 5&lt;/option&gt;
          &lt;/select&gt;
          &lt;i class="dropdown icon"&gt;&lt;/i&gt;
          &lt;div class="default text"&gt;Choose Specialty&lt;/div&gt;
          &lt;div class="menu" tabindex="-1"&gt;
              &lt;div class="item" data-value="1"&gt;Option 1&lt;/div&gt;
              &lt;div class="item" data-value="1"&gt;Option 2&lt;/div&gt;
              &lt;div class="item" data-value="1"&gt;Option 3&lt;/div&gt;
              &lt;div class="item" data-value="1"&gt;Option 4&lt;/div&gt;
              &lt;div class="item" data-value="1"&gt;Option 5&lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Error labels attaching to all with Semantic-UI library disabled (from the browser): </p>
  
  <pre><code>&lt;div class="name"&gt;
      &lt;input type="text" name="firstname" id="firstname" placeholder="First Name" class="error"&gt;
      &lt;label id="firstname-error" class="error" for="firstname"&gt;Please enter your first name&lt;/label&gt;
      &lt;input type="text" name="lastname" id="lastname" placeholder="Last Name" class="error"&gt;
      &lt;label id="lastname-error" class="error" for="lastname"&gt;Please enter your last name&lt;/label&gt;
  &lt;/div&gt;
  &lt;div class="email"&gt;
      &lt;input type="text" name="email" id="email" placeholder="Email" class="error"&gt;
      &lt;label id="email-error" class="error" for="email"&gt;Please provide a valid email address&lt;/label&gt;
  &lt;/div&gt;
  &lt;div class="specialty"&gt;
      &lt;select name="specialty" class="ui dropdown error" id="specialty"&gt;
          &lt;option value="" disabled="" selected=""&gt;Choose Specialty&lt;/option&gt;
          &lt;option value="1"&gt;Option 1&lt;/option&gt;
          &lt;option value="1"&gt;Option 2&lt;/option&gt;
          &lt;option value="1"&gt;Option 3&lt;/option&gt;
          &lt;option value="1"&gt;Option 4&lt;/option&gt;
          &lt;option value="1"&gt;Option 5&lt;/option&gt;
      &lt;/select&gt;
      &lt;label id="specialty-error" class="error" for="specialty"&gt;Please select a specialty&lt;/label&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I do need Semantic-UI for Select Element styling, and am aware that Semantic UI has it's own Validator - but am stuck with jQuery Validation for this project.</p>
  
  <p>Any ideas as to how to get the two libraries to play nicely together?</p>