Advanced — onError Callback

Use the callback parameter to handle validation errors in a centralized way.

import { isEmail, isString } from '@andresclua/validate'

// Centralized error handler
function onError(wrapper, errorEl, message) {
    wrapper.classList.add('c--form-input-a--error')
    wrapper.classList.remove('c--form-input-a--valid')
    errorEl.textContent = message
}

let allValid = true

isString({
    element: nameInput.value,
    config: { required: true, minLength: 2 },
    callback: (result) => {
        if (!result.isValid) {
            onError(nameWrapper, nameError, result.errorMessage)
            allValid = false
        }
    }
})

isEmail({
    element: emailInput.value,
    config: { required: true },
    callback: (result) => {
        if (!result.isValid) {
            onError(emailWrapper, emailError, result.errorMessage)
            allValid = false
        }
    }
})

if (allValid) {
    nameWrapper.classList.add('c--form-input-a--valid')
    emailWrapper.classList.add('c--form-input-a--valid')
}
Playground