Validation

<form class="demo" onsubmit="event.preventDefault()">
  <div class="demo-field">
    <label class="demo-label" for="emails">Invite by email <span class="demo-hint">· anything that isn’t an address is refused</span></label>
    <input id="emails" name="emails">
    <p class="demo-hint" id="note">Try “aisha@example.com”, then “not-an-email”.</p>
  </div>
  <p class="demo-out" id="out">No invitations yet</p>
</form>

import { createCombobox } from 'https://devix.pk/cdn/oss/combobox@1.0.0/index.js';

const out = document.getElementById('out');
const note = document.getElementById('note');
const EMAIL = /^[^\s@]+@[^\s@]+\.[^\s@]{2,}$/;

createCombobox(document.getElementById('emails'), {
  name: 'emails',
  placeholder: 'name@example.com',
  maxTags: 5,
  // Return the value to keep, or null to refuse it.
  validate: (text) => {
    const clean = text.trim().toLowerCase();
    const ok = EMAIL.test(clean);
    note.textContent = ok ? 'Added.' : `“${text.trim()}” is not an email address, so it was not added.`;
    return ok ? clean : null;
  },
  onChange: (values) => (out.textContent = values.length ? `Inviting ${values.length}: ${values.join(', ')}` : 'No invitations yet'),
});

@import url('https://devix.pk/cdn/oss/combobox@1.0.0/select.min.css');