Magento 2: How to add validation in Custom Component Extend

Question

How to add custom validation in component extend element magento2 where value is required and it must be a URL below is the js component extend snippet

define(
    [
        'uiComponent',
        'Abc_OneStepCheckout/js/model/checkout-data',
        'Abc_OneStepCheckout/js/model/url/url'
    ],
    function (Component, checkoutData, url) {
        'use strict';

        return Component.extend({
            defaults: {
                template: 'Abc_OneStepCheckout/sidebar/url',
                inputValue: ''
            },
            isVisible: window.checkoutConfig.isUrlEnabled,

            /**
             * @inheritdoc
             */
            initialize: function () {
                var url = checkoutData.getUrl();

                this._super();

                if (url) {
                    this.inputValue(url);
                }
                this.inputValue.subscribe(function (newValue) {
                    checkoutData.setUrl(newValue);
                }, this);
            },

            /**
             * @inheritdoc
             */
            initObservable: function () {
                this._super();
                this.inputValue = url;

                return this;
            }
        });
    }
);

I have added validation in checkout layout xml - but it didn't work

<item name="vanity-url" xsi:type="array">
    <item name="component" xsi:type="string">Abc_OneStepCheckout/js/view/sidebar/url</item>
    <item name="sortOrder" xsi:type="string">13</item>
    <item name="displayArea" xsi:type="string">url</item>
    <item name="dataScope" xsi:type="string">url</item>
    <item name="provider" xsi:type="string">checkoutProvider</item>
     <item name="validation" xsi:type="array">
        <item name="required-entry" xsi:type="boolean">true</item>
        <item name="url" xsi:type="boolean">true</item>
    </item>
</item>