IF and ELSE check is not working

Question

Guys, I’m trying to do the following, when you click on the button it checks if the fields are empty, if it’s all filled it hides the form, the problem it’s not falling into else of verification: if (formError) {...} else {...}.

When the form is completed correctly it should fall into the else.

Here is an excerpt from the code.

const fields = [...$('.form-group input')];

$.each(fields, function (index) {
    if ($(this).val() === "") {
        cardForm.removeClass('fadein').addClass('validate-error')
    }
});

const formError = $('.validate-error');

if (formError) {
    formError.bind('animationend', function (e) {
        if (e.originalEvent.animationName === 'nono') {
            formError.removeClass('validate-error').addClass('fadein');
        }
    });
} else {
    cardForm.removeClass('fadein').addClass('form-hide');
}

Answer 1

The problem is in how you do the check. When you run this line:

const formError = $('.validate-error');

The jQuery will return an object with 0 children, but not a Undefined object, this will make it at all times enter into the verification of if. To solve your problem, change the check to:

if (formError.length > 0)

This will check if there is any wrong field, otherwise it will execute the else.