isEmail() — Async | @andresclua/validate

import { isEmail } from '@andresclua/validate'

// On Blur — callback approach
blurInput.addEventListener('blur', () => {
    isEmail({
        element: blurInput.value,
        config: { required: true },
        callback: (result) => {
            if (result.isValid) {
                blurWrapper.classList.remove('c--form-input-a--error')
                blurWrapper.classList.add('c--form-input-a--valid')
                blurError.textContent = ''
            } else {
                blurWrapper.classList.add('c--form-input-a--error')
                blurWrapper.classList.remove('c--form-input-a--valid')
                blurError.textContent = result.errorMessage
            }
        }
    })
})

// On Submit — callback approach
validateBtn.addEventListener('click', () => {
    isEmail({
        element: submitInput.value,
        config: { required: true },
        callback: (result) => {
            if (result.isValid) {
                submitWrapper.classList.remove('c--form-input-a--error')
                submitWrapper.classList.add('c--form-input-a--valid')
                submitError.textContent = ''
            } else {
                submitWrapper.classList.add('c--form-input-a--error')
                submitWrapper.classList.remove('c--form-input-a--valid')
                submitError.textContent = result.errorMessage
            }
        }
    })
})

<div class="c--form-group-a">
  <label class="c--label-a" for="email">Email</label>
  <div class="c--form-input-a">
    <input class="c--form-input-a__item" type="email" id="email">
  </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;
    appearance: 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; }

callback  Function  (result: { isValid: boolean, errorMessage: string | null }) => void

isEmail() — Async (callback)