isSelect() — Custom Validation Function

import { isSelect } from '@andresclua/validate'

const config = {
    required: true,
    customValidation: (value) => ({
        isValid: value !== 'es',
        errorMessage: 'Spain is not available in your region'
    })
}

// On Change
selectEl.addEventListener('change', () => {
    const result = isSelect({ element: selectEl.value, config })
    if (result.isValid) {
        wrapper.classList.remove('c--form-input-a--error')
        wrapper.classList.add('c--form-input-a--valid')
        errorEl.textContent = ''
    } else {
        wrapper.classList.add('c--form-input-a--error')
        wrapper.classList.remove('c--form-input-a--valid')
        errorEl.textContent = result.errorMessage
    }
})

// On Submit
validateBtn.addEventListener('click', () => {
    const result = isSelect({ element: selectEl.value, config })
    if (result.isValid) {
        wrapper.classList.remove('c--form-input-a--error')
        wrapper.classList.add('c--form-input-a--valid')
        errorEl.textContent = ''
    } else {
        wrapper.classList.add('c--form-input-a--error')
        wrapper.classList.remove('c--form-input-a--valid')
        errorEl.textContent = result.errorMessage
    }
})

<div class="c--form-group-a">
  <label class="c--label-a" for="country">Country</label>
  <div class="c--form-input-a">
    <select class="c--form-input-a__item" id="country">
      <option value="">-- Select a country --</option>
      <option value="es">Spain</option>
      <option value="mx">Mexico</option>
    </select>
  </div>
  <span class="c--form-error-a"></span>
</div>

/* Orientative — feel free to adapt to your own conventions */

.c--form-group-a {
    margin-bottom: 1.5em;
}

.c--label-a {
    display: block;
    font-size: 1em;
    margin-bottom: 0.5em;
}

.c--form-input-a {
    display: block;
    width: 100%;
    padding: 0.5em;
    border: 1px solid #ccc;
    border-radius: 0.25em;
}
.c--form-input-a--error  { border-color: red; background: #ffe6e6; }
.c--form-input-a--valid  { border-color: green; background: #e6ffe6; }

.c--form-input-a__item {
    display: block;
    width: 100%;
    font-size: 1em;
    outline: none;
    background: transparent;
    border: none;
}

.c--form-error-a {
    color: red;
    font-size: 0.875em;
    display: none;
}
.c--form-error-a:not(:empty) { display: block; }

required          boolean   Whether the field is required. Default: false
customValidation  function  Custom validation logic that returns { isValid, errorMessage }