Custom validation message on 'type=url' to override standard CSS

If a user does not search a url on the front end, I would like the design to appear as follows

Currently, this my form, which is using the type="url" to provide the validation without having to make a regex.

Here is a copy of my current form with a post request

<form action="POST" id="Submit">
                <div class="inner-form">
                    <div class="input-field first-wrap">
                        <div class="svg-wrapper">
                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
                      <path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z "></path>
                  </svg>
                        </div>
                        <input id="search" type="url" name="url" placeholder="Paste a domain here" />
                    </div>

                    <div class="input-field second-wrap">
                        <button id="button" class="btn-search" onclick="searchIt()" value="press" type="submit">SEARCH       </button>
                    </div>
                </div>

            </form>

and here is my script tag after the form

let progress = 0;
const maxTime = 5000; // 5 seconds
let interval = null;


    function searchIt() {

        let form = document.querySelector('form')
        console.log(form)

        form.addEventListener('submit', async(e) => {
         // onclick or the event that start the call
            interval = setInterval(() => {
            progress = progress >= 100 ? 100 : progress + 1
            document.getElementById('myprogress').style.width = `${progress}%`


        // end interval and wait at 100%
            if(progress == 100) clearInterval(interval);
            }, maxTime/100)
            document.getElementById('loadingcontainer').style.display = ""
            e.preventDefault()
            let urlIN = form.url.value
            let url = encodeURIComponent(urlIN)
            console.log(url)
            try {
                const data = await fetch('/', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify({
                        url: url
                    })


                }).then(res => {
                    document.open()
                    res.text().then(function(text) {

                        document.write(text)
                        // Hide the progressbar, stop the timer and reset progress
                    clearInterval(interval);
                    progress = 0;
                    document.getElementById('myprogress').style.width = "0%"
                    document.getElementById('loadingcontainer').style.display = "none";

                    });

                })


            } catch (err) {
                console.error(err)
            }

        })



    }

How could I achieve the specified design in the mockup? I cannot seem to get this one for the life of me