Add custom textbox after shipping method if freeshipping selected with validation

i’ve added textbox field if shipping method is freeshipping based on the shipping method textbox functionality working fine. but i want to make that field required which is not working here is my code

checkout_index_index.xml

 <referenceBlock name="checkout.root">
        <arguments>
            <argument name="jsLayout" xsi:type="array">
                <item name="components" xsi:type="array">
                    <item name="checkout" xsi:type="array">
                        <item name="children" xsi:type="array">
                            <item name="steps" xsi:type="array">
                                <item name="children" xsi:type="array">
                                    <item name="shipping-step" xsi:type="array">
                                        <item name="children" xsi:type="array">
                                            <item name="shippingAddress" xsi:type="array">
                                                <item name="children" xsi:type="array">
                                                    <item name="shippingAdditional" xsi:type="array">
                                                        <item name="component" xsi:type="string">uiComponent</item>
                                                        <item name="displayArea" xsi:type="string">shippingAdditional</item>
                                                        <item name="children" xsi:type="array">
                                                            <item name="shipping_additional_field" xsi:type="array">
                                                                <item name="validation" xsi:type="array">
                                                                        <item name="required-entry" xsi:type="boolean">true</item>
                                                                        <item name="validate-phoneStrict" xsi:type="boolean">true</item>
                                                                    </item>
                                                                <item name="component" xsi:type="string">Vendor_Module/js/view/checkout/shipping-additional-field</item>
                                                            </item>
                                                        </item>
                                                    </item>
                                                </item>
                                            </item>
                                        </item>
                                    </item>
                                </item>
                            </item>
                        </item>
                    </item>
                </item>
            </argument>
        </arguments>
    </referenceBlock>

Shipping-additional-field.js

define([
    'jquery',
    'ko',
    'uiComponent',
    'Magento_Checkout/js/model/quote',
    'jquery/validate',
    'mage/validation'
], function (
    $, ko, Component, quote) {
    'use strict';
    return Component.extend({
        defaults: {
            template: 'Vendor_Module/checkout/shipping-additional-field'
        },
        initObservable: function () {
            this.selectedMethod = ko.computed(function() {
                var method = quote.shippingMethod();
                var selectedMethod = method != null ? method.method_code : null;
                return selectedMethod;
            }, this);

            return this;
        },
    });
}

);

shipping-additional-field.html

<div data-bind="visible: selectedMethod() == 'freeshipping'">
<div>
    <div data-role="content">
        
           
                <div class="field">
                    <label class="label" for="cell_number" role="heading" aria-level="2">
                        <span data-bind="i18n: 'Cell Phone *'"></span>
                    </label>
                    <div class="control">
                        <input type="text" class="input-text required-entry" id="cell_number" name="cell_number"
                               data-bind="attr:{placeholder: $t('Cell Phone')}" data-validate="{required:true}"></input>
                    </div>
                </div>
            
    </div>
</div>

any help will be appreciate