radio checkbox single inline error test

radio checkbox single inline error test

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, The main label on the Name field turns red, but not on the radios.
</p>
<form class="ui form">
  <div class="two fields">
    <div class="field">
      <div class="grouped fields">
        <label for="fruit">Select your second favorite color:</label>
        <div class="field">
          <div class="ui radio checkbox">
            <input class="hidden" tabindex="0" name="color" type="radio">
            <label>yellow</label>
          </div>
        </div>
        <div class="field">
          <div class="ui radio checkbox">
            <input class="hidden" tabindex="0" name="color" type="radio">
            <label>Orange</label>
          </div>
        </div>
        <div class="field">
          <div class="ui radio checkbox">
            <input class="hidden" tabindex="0" name="color" type="radio">
            <label>Red</label>
          </div>
        </div>
        <div class="field">
          <div class="ui radio checkbox">
            <input class="hidden" tabindex="0" name="color" type="radio">
            <label>blue</label>
          </div>
        </div>
      </div>
    </div>
    <div class="field">
      <label>Name</label>
      <input name="name" type="text" />
    </div>
  </div>
  <div class="field">
  <label>Select your favorite fruit:</label>
  <div class="ui segment inline fields">
    <div class="field">
      <div class="ui radio checkbox">
        <input class="hidden" tabindex="0" name="fruit" type="radio">
        <label>Apples</label>
      </div>
    </div>
    <div class="field">
      <div class="ui radio checkbox">
        <input class="hidden" tabindex="0" name="fruit" type="radio">
        <label>Oranges</label>
      </div>
    </div>
    <div class="field">
      <div class="ui radio...

CSS

body {
  margin: 10px;
}

.ui.form .fields.error label {
  color: #9f3a38;
}

JavaScript

$('.ui.radio.checkbox').checkbox();
$('.ui.form')
  .form({
    inline: true,
    onInvalid: function(errors) {
      let elem = $(this);
      let fld = elem.filter(':checkbox,:radio').parents('.field,.fields').has('label:first-child').filter(':first');
      //lbl = fld.children('label').addClass('error');
      lbl = fld.children('label');
      fld.find('.field.error').not(':last').find('.prompt').remove();
     console.log(fld,lbl); //fld.find('.field.error').find('.prompt').removeClass('pointing').addClass('left pointing');
     // fld.after(prm);
     fld.addClass('error');
    },
    onValid: function() {
      let elem = $(this);
      let fld = elem.filter(':checkbox,:radio').parents('.field,.fields').has('label:first-child').filter(':first');
    //  lbl = fld.children('label').removeClass('error');
      fld.removeClass('error');
    },
    fields: {
      name: {
        identifier: 'name',
        rules: [{
          type: 'empty',
          prompt: 'Please enter a Name'
        }]
      },
      fruit: {
        identifier: 'fruit',
        rules: [{
          type: 'checked',
          prompt: 'Please check a fruit'
        }]
      },
      fruits: {
        identifier: 'fruits',
        rules: [{
          type: 'checked',
          prompt: 'Please check a second fruit'
        }]
      },
      color: {
        identifier: 'color',
        rules: [{
          type: 'checked',
          prompt: 'Please check a color'
        }]
      }
    }
  });