Form validation : checkbox and radio are not reset unless first option is selected.

Form validation : checkbox and radio are not reset unless first option is selected.

by Bob Marley

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.8/semantic.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.8/semantic.min.css">
<p style="color:red;">
 Press submit, then select any option other than the first. The field error doesn't automatically reset.
</p>

<form class="ui form">
<div class="six wide field">
<label>Name</label>
<input name="name" type="text" />
</div>
  <div class="field">
    <label>How often do you use checkboxes?</label>
    <div class="inline fields">
      <div class="field">
        <div class="ui radio checkbox">
          <input name="frequency" type="radio">
          <label>Once a week</label>
        </div>
      </div>
      <div class="field">
        <div class="ui radio checkbox">
          <input name="frequency" type="radio">
          <label>2-3 times a week</label>
        </div>
      </div>
      <div class="field">
        <div class="ui radio checkbox">
          <input name="frequency" type="radio">
          <label>Once a day</label>
        </div>
      </div>
      <div class="field">
        <div class="ui radio checkbox">
          <input name="frequency" type="radio">
          <label>Twice a day</label>
        </div>
      </div>
    </div>

  </div>
  <div class="inline field">
    <label>Fruits</label>
    <div class="ui checkbox">
      <input name="checkbox" type="checkbox">
      <label>Red</label>
    </div>
    <div class="ui checkbox">
      <input name="checkbox" type="checkbox">
      <label>Blue</label>
    </div>
    <div class="ui checkbox">
      <input name="checkbox" type="checkbox">
      <label>Orange</label>
    </div>
  </div>
  <div class="inline field">
    <label>Fruits</label>
    <div class="ui checkbox">
      <input name="radio" type="radio">
      <label>Red</label>
    </div>
    <div class="ui checkbox">
      <input name="radio" type="radio">
      <label>Blue</label>
    </div>
    <div class="ui...

CSS

body { margin:10px; }

JavaScript

$('.ui.form')
  .form({
    fields: {
    name: {
        identifier: 'name',
        rules: [{
          type: 'empty',
          prompt: 'Please enter a name'
        }]
      },
     frequency: {
        identifier: 'frequency',
        rules: [{
          type: 'checked',
          prompt: 'Please check a frequency'
        }]
      },
      checkbox: {
        identifier: 'checkbox',
        rules: [{
          type: 'checked',
          prompt: 'Please check the checkbox'
        }]
      },
      radio: {
        identifier: 'radio',
        rules: [{
          type: 'checked',
          prompt: 'Please check the radio'
        }]
      }
    }
  });