javascript - Validate url on form submission without using type=url

Question

Currently in my form, I have a type=url to only accept a url in the certain component of the form. However, when a url is not submitted, chrome throws its own validation error. How can I use type=text, whiile throwing the error message in my HTMlL, and only accept a valid url?

I have tried multiple different regular expressions I found online, but it could also just be the way I am doing it. Any advice is helpful.

Note: https:// , http://, www. are all acceptable.

HTML Form:

<form method="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 domain" required/>
                    </div>

                    <div class="input-field second-wrap">
                        <button id="button" class="btn-search" onclick="searchIt()" value="press" type="submit">SEARCH       </button>
                    </div>
                </div>
                    <p id="errorMessage">Yikes! That's not a valid URL. .</p>

            </form>

Javascript:

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

    let form = document.querySelector('form')

        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('/result', {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json'
                        },
                        body: JSON.stringify({
                            url: url
                        })
                    }).then(res => {
                        //document.open()
                        res.text().then(function(text) {
                             console.log(text);   
                            //document.write(text)
                            document.getElementById('result').innerHTML = 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)
                }

            })



        }

question from:https://stackoverflow.com/questions/66056477/validate-url-on-form-submission-without-using-type-url

Answer 1

Waitting for answers