validator method not working on change

<input name="mobile_number"
                                                   id="mobilenumber" type="number" class="input-text"
                                                   title="<?= $block->escapeHtml(__('Mobile Number')) ?>"
                                                   placeholder="<?= $block->escapeHtml(__('Mobile Number')) ?>"
                                                   data-validate="{required:true,mobile_ksa:true,maxlength:7}">

$.validator.addMethod(
                    'mobile_ksa', function (phone_number, element) {
                        return this.optional(element) || phone_number.length > 9 &&
                            phone_number.match(/^(05)(5|0|3|6|4|9|1|8|7)([0-9]{7})$/);
                    }, $.mage.__('wrong phone number. example: 05xxxxxxxx'));
                });

the above code i am using for validation it working when i click on button but i want its work when type how i can achevie this?