Advanced — Form Validation

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

const nameInput = document.getElementById('name')
const nameWrapper = document.getElementById('name-wrapper')
const nameError = document.getElementById('name-error')
const emailInput = document.getElementById('email')
const emailWrapper = document.getElementById('email-wrapper')
const emailError = document.getElementById('email-error')

validateBtn.addEventListener('click', () => {
    nameWrapper.classList.remove('c--form-input-a--error', 'c--form-input-a--valid')
    emailWrapper.classList.remove('c--form-input-a--error', 'c--form-input-a--valid')
    nameError.textContent = ''
    emailError.textContent = ''

    const nameResult = isString({ element: nameInput.value, config: { required: true, minLength: 2 } })
    const emailResult = isEmail({ element: emailInput.value, config: { required: true } })

    if (nameResult.isValid) {
        nameWrapper.classList.add('c--form-input-a--valid')
    } else {
        nameWrapper.classList.add('c--form-input-a--error')
        nameError.textContent = nameResult.errorMessage
    }

    if (emailResult.isValid) {
        emailWrapper.classList.add('c--form-input-a--valid')
    } else {
        emailWrapper.classList.add('c--form-input-a--error')
        emailError.textContent = emailResult.errorMessage
    }
})