Javascript mail form validator

I’m testing a javascript code to validate an email form with confirmation email. When I enter a confirmation email, its field remains in "success" mode even if I insert only one character equal to that of the email field, regardless of whether the regular expression is respected. I would like to achieve that if the email field is invalid, the confirmation email field must not go to "success" mode but wait for email validation to continue. Thanks for your help.

HTML

<form id="signup" class="form">
    <div class="form-field">
        <label for="mail">Mail:</label>
        <input type="mail" name="mail" id="mail" autocomplete="off">
        <small></small>
    </div>
    <div class="form-field">
        <label for="confirm-mail">Confirm Mail:</label>
        <div class="form-field input-group">
            <input type="mail" name="confirm-mail" id="confirm-mail" autocomplete="off">
            <small></small>
        </div>
    </div>
    <div class="form-field">
        <input class="btn" type="submit" value="Sign Up">
    </div>
</form>

Javascript

const mail = document.querySelector('#mail');
const confirmMail = document.querySelector('#confirm-mail');
const form = document.querySelector('#signup');

//shows error message
const showError = (input, message) => {
    // get the form-field element
    const formField = input.parentElement;
    // add the error class
    formField.classList.remove('success');
    formField.classList.add('error');

    // show the error message
    const error = formField.querySelector('small');
    error.textContent = message;
};

//shows success message
const showSuccess = (input) => {
    // get the form-field element
    const formField = input.parentElement;

    // remove the error class
    formField.classList.remove('error');
    formField.classList.add('success');

    // hide the error message
    const error = formField.querySelector('small');
    error.textContent = '';
};

//checks input field
const isRequired = value => value === '' ? false : true;

//checks email is valid
const isMailValid = (mail) => {
    const re = /^(([^<>()[]\.,;:s@"]+(.[^<>()[]\.,;:s@"]+)*)|(".+"))@(([[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}])|(([a-zA-Z-0-9]+.)+[a-zA-Z]{2,}))$/;
    return re.test(mail);
};

//validate email field
const checkMail = () => {
    let valid = false;
    const mailVal = mail.value.trim();
    if (!isRequired(mailVal)) {
        showError(mail, 'Email cannot be blank.');
    } else if (!isMailValid(mailVal)) {
        showError(mail, 'Email is not valid.')
    } else {
        showSuccess(mail);
        valid = true;
    }
    return valid;
};

//validate confirm password
const checkConfirmMail = () => {
    let valid = false;
    // check confirm password
    const confirmMailVal = confirmMail.value.trim();
    const mailVal = mail.value.trim();

    if (!isRequired(confirmMailVal)) {
        showError(confirmMail, 'Confirm Password is required');
    } else if (mailVal !== confirmMailVal) {
        showError(confirmMail, 'Confirm Password does not match');
    } else {
        showSuccess(confirmMail);
        valid = true;
    }

    return valid;
};

//modifying submit event handler
form.addEventListener('submit', function (e) {
    // prevent the form from submitting
    e.preventDefault();

    // validate forms
    let isMailValid = checkMail(),
        isConfirmMailValid = checkConfirmMail();

    let isFormValid = isMailValid &&
        isConfirmMailValid;

    // submit to the server if the form is valid
    if (isFormValid) {

    }
});

With this code, if I enter any same character in the email and email confirmation fields, the email confirmation field remains valid and it shouldn’t be that way.