Включение кнопки после валидности всех полей форм jQuery validation

Есть простая форма, которой нужно провести валидацию и если все поля валидный с кнопки button нужно убрать значение disabled и изменить стили. Пример формы

<form id='form'>
<div>
<label for="first_name">{{ __('Last Name') }}</label>
<input type="text" name="first_name" id="first_name"
class="" value="{{ old('first_name') }}" placeholder="{{ __('Enter  
First Name') }}">
</div>
<div>
<label for="last_name">{{ __('Last Name') }}</label>
<input type="text" name="last_name" id="last_name"
value="{{ old('last_name') }}" placeholder="{{ __('Enter Last Name') 
}}">
</div>
<div>
<label for="name">{{ __('Name') }}</label>
<input type="text" name="name" id="name" value="{{ old('name') }}" 
placeholder="{{ __('Enter Name') }}">
</div>
<button id="update_button" disabled>{{ __('Continue') }}</button>
</form>

JS файл:

$('#form').validate({
rules: {
    first_name: {
            required: true,
            minlength: 2,
            maxlength: 20,
            regex: /^[a-zA-Zа-яА-ЯҐґЪъЭэ\-\S]+$/,
        },
        last_name: {
            required: true,
            minlength: 2,
            maxlength: 20,
            regex: /^[a-zA-Zа-яА-ЯҐґЪъЭэ\-\S]+$/,
        },
        name: {
            required: true,
            regex: /^(?=.*[a-zA-Z])[0-9a-zA-Z!@#$%^&*=\-._\S]{2,20}$/
        },
    },
messages: {
    first_name: {
            required: "",
            minlength: "",
            maxlength: "",
            regex: "",
        },
        last_name: {
            required: "",
            minlength: "",
            maxlength: "",
            regex: "",
        },
        name: {
            required: "",
            regex: ""
        },
    },
    errorPlacement: function(error, element) {
        error.insertAfter(element.parent());
    },
    errorClass: 'error-message text-red-500',
    validClass: "successDate",

    highlight: function (element, errorClass, validClass) {
        $(element).addClass(errorClass).removeClass(validClass);
        $(element).parent().addClass('border-red-500');
    },
    unhighlight: function (element, errorClass, validClass) {
        $(element).removeClass(errorClass).addClass(validClass);
        $(element).parent().removeClass('border-red-500');
    },
});
$('#form').change(function () {
    if ($('input#first_name').hasClass('successDate') &&      
$('input#last_name').hasClass('successDate') &&  
$('input#name').hasClass('successDate')) {
$('#update_button').attr('disabled', false).removeClass('text-gray- 
500').addClass('bg-
yellow-250 text-black');
} else {
$('#update_button').attr('disabled', true).removeClass('bg-yellow-250   
text-black  
disabled:opacity-100').addClass('text-gray-500');
}
});

В данном случае условие if не выполняется так как сначала выполняется $('#form').change(function () {} а после только происходит валидация и добавляется класс в нужный инпут, а нужно наоборот, сначала проводить валидацию и если поля валидный включить кнопку и дать е другие стили. Вопрос следующий, как включить кнопку только после того как все поля формы будут валидны?