jQuery Validation. Разблокировка кнопки после ввода

Для валидации формы использую плагин https://jqueryvalidation.org/ и маска для телефона https://github.com/RobinHerbots/Inputmask. Задача - сделать разблокировку кнопки (убрать disabled) сразу же, как только введен последний необходимый символ в поле. Для этого делаю обработку в методе onkeyup. Вот разметка формы

<form action="#">
    <div class="form-input">
        <input type="text" name="name" placeholder="name" required>
    </div>
    <div class="form-input">
        <input type="text" name="phone" placeholder="phone" required class="js-phone">
    </div>
    <div class="form-input">
        <input type="text" name="email" placeholder="email" required>
    </div>

    <button type="submit" disabled>Submit</button>
</form>

Вот скрипт

$(document).ready(function() {
        var phone = $(".js-phone");
        
        $('form').validate({
            rules: {
                name: {
                    required: true,
                    minlength: 2,
                },
                email: {
                    required: true,
                    minlength: 3
                },
            },
            messages: {
                name: {
                    required: "Вы не ввели значение",
                    minlength: "Вы не ввели значение",
                },
                email: {
                    required: "Вы не ввели значение",
                    minlength: "Вы не ввели значение"
                },
            },
            onkeyup: function (element) {

                if($(element).valid()){
                    $(element).parent().addClass('valid').removeClass('error');
                    checkButton();
                } else {
                    $(element).parent().removeClass('valid').addClass('error');
                    checkButton();
                }

            },
            // highlight: function highlight(element) {
            //     $(element).parent().addClass('error').removeClass('valid');
            //     checkButton();
            // },
            // unhighlight: function unhighlight(element) {
            //     var phoneInput;
            //     if($(element).hasClass('js-phone')) {
            //         phoneInput = $(element);
            //         if (phoneInput.inputmask("isComplete")){
            //             phoneInput.parent().removeClass('error').addClass('valid');
            //             checkButton();
            //         } else {
            //             phoneInput.parent().removeClass('valid').addClass('error');
            //             checkButton();
            //         }
            //     } else {
            //         $(element).parent().removeClass('error').addClass('valid');
            //         checkButton();
            //     }
            // },
        });

        phone.inputmask('mask', {
            'mask': '+7 (999) 999-99-99',
            'showMaskOnHover':false,
            'placeholder': "+7 (___) ___-__-__"
        });
        phone.on('change', function () {
            if (phone.inputmask("isComplete")){
                phone.removeClass('error').addClass('valid');
                phone.parent().removeClass('error').addClass('valid');
                checkButton();
            } else {
                phone.removeClass('valid').addClass('error');
                phone.parent().removeClass('valid').addClass('error');
                checkButton();
            }
        });
    });

    function checkButton() {
        let flagBtnActive = false;
        const input = $('.form-input.valid');

        flagBtnActive = input.length === 3;

        if (flagBtnActive) {
            $('button').removeAttr('disabled').removeClass('disabled');
        } else {
            $('button').attr('disabled', true).addClass('disabled');
        }
    }

Однако в таком коде есть косяк. Поле начинает подсвечиваться красным после первого же символа.

Я пробовала другой вариант, убрать обработчик onkeyup, а вместо него использовать highlight и unhighlight

            highlight: function highlight(element) {
                $(element).parent().addClass('error').removeClass('valid');
                checkButton();
            },
            unhighlight: function unhighlight(element) {
                var phoneInput;
                if($(element).hasClass('js-phone')) {
                    phoneInput = $(element);
                    if (phoneInput.inputmask("isComplete")){
                        phoneInput.parent().removeClass('error').addClass('valid');
                        checkButton();
                    } else {
                        phoneInput.parent().removeClass('valid').addClass('error');
                        checkButton();
                    }
                } else {
                    $(element).parent().removeClass('error').addClass('valid');
                    checkButton();
                }
            },

Однако и этот метод не подходит, потому что кнопка активируется не после ввода символа, а только после того, как кликнешь вне поля https://skr.sh/vACUiVckNJG. Очень нужно найти способ, как сделать активацию кнопки при вводе символов, но чтобы не было ошибки, как в первом варианте. Плюс ко всему, мне приходится отдельно натягивать маску на телефон, но в целом я с этим справилась, важно, чтобы это продолжало работать.