Advanced — beforeSubmit Hook

import { isEmail } from '@andresclua/validate'

async function handleSubmit() {
    emailWrapper.classList.remove('c--form-input-a--error', 'c--form-input-a--valid')
    errorEl.textContent = ''

    // 1. Client-side validation first
    const emailResult = isEmail({
        element: emailInput.value,
        config: { required: true }
    })

    if (!emailResult.isValid) {
        emailWrapper.classList.add('c--form-input-a--error')
        errorEl.textContent = emailResult.errorMessage
        return
    }

    // 2. beforeSubmit: async server check (example)
    try {
        submitBtn.disabled = true
        submitBtn.textContent = 'Checking...'

        // Simulate async check
        await new Promise(resolve => setTimeout(resolve, 1000))

        emailWrapper.classList.add('c--form-input-a--valid')
    } catch (error) {
        emailWrapper.classList.add('c--form-input-a--error')
        errorEl.textContent = 'Server error — please try again'
    } finally {
        submitBtn.disabled = false
        submitBtn.textContent = 'Submit'
    }
}

submitBtn.addEventListener('click', handleSubmit)