form validation multiple select

form validation multiple select with bad email rejection

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.9/semantic.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.9/semantic.min.css">
<div class="ui form">
  <div class="ui button go">
    Go
  </div>
  <p>

  </p>
  <div class="field">
    <input type="text" name="other" value="" placeholder="Other email">
  </div>
  <div class="field">
    <div class="ui multiple search selection dropdown">
      <input type="hidden" name="email">
      <i class="dropdown icon"></i>
      <div class="default text">Email</div>
      <div class="menu">

      </div>
    </div>
  </div>
  <div class="ui error message"></div>
  <div class="ui submit button">Submit</div>
</div>

CSS

body {
  margin: 20px;
}

JavaScript

$('.ui .dropdown').dropdown({
  allowAdditions: true,
  hideAdditions: false,
  filterRemoteData: true,
  showNoResults: true,
  apiSettings: {
    url: 'fake',
    response: function(response) {
      var
        response = {
          "success": true,
          "results": [{
            "name": "bad@",
            "value": "bad@"
          }, {
            "name": "[email protected]",
            "value": "[email protected]"
          }, {
            "name": "[email protected]",
            "value": "[email protected]"
          }, {
            "name": "bad@email",
            "value": "bad@email"
          }]
        };
      return response;
    }
  },
  message: {
    addResult: '{term}',
  },
  templates: {
    message: function(m) {
      console.log('templates.message', m);
      return 'hello world' + m;
    },
    addition: function(search) {

      var output = search + ' <i class="green checkmark icon" style="margin:0;"></i><span style="color:green;">Add</span>';

      //console.log(search);

      if (!$.fn.form.settings.regExp.email.test(search)) {

        output = search + ' <i class="red remove icon" style="margin:0;"></i><span style="color:red;">Invalid Email</span>';
      }

      return output;
    }
  },

  onLabelCreate: function(value, text) {
    if (!$.fn.form.settings.regExp.email.test(value)) {
      window.setTimeout(function() {
        $('.ui .dropdown').dropdown('remove selected', value)
      }, 0);
    }
    console.log($(this));
    return $(this);
  },
  onLabelSelect: function($selectedLabels) {
    console.log('onLabelSelect', $selectedLabels);
  }
});
$('.ui.form')
  .form({
    onInvalid: function() {
      console.log('onInvalid', $(this));
    },
    onFailure: function(formErrors, fields) {
      if (!$('.ui.form').form('is valid', 'email')) {
        var emails = $('.ui.form').form('get value', 'email');
        console.log(emails);
        $.each(emails.split(','), function(i, v) {
          console.log(i, v,...