Custom validation message on 'type=url' - html

Question

I am using type=url in my form to only allow a url to be passed through.
However, using the standard validation message is as follows
Is there a way to change this? Here is the design what I am trying to achive (outline search bar, add message beneath, and make text in search box orange)
Here is function after my 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('/', {
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)
}
})
}

Answer 1

Rather than write all the necessary validation for URLs, you can use the HTML5 input type "url" in place of type "text", which has all that validation built in:
<input type="url" name="location">
That will require a properly formed URL, but ftp:// is also proper.
You can further constrain it by using the
pattern attribute for your requirements "beginning in http://, https://, includes www.".
Here, using novalidate on the <form_> prevents the browser from showing it's own messages, then you can test a field's validity with field.checkValidity()
const urlField = document.getElementById('onlyweb');
const messagebox = document.getElementById('errormessage');
document.getElementById('testform')
.addEventListener('submit', function(e) {
e.preventDefault();
const valid = urlField.checkValidity();
console.log('valid =', valid);
if (valid) {
messagebox.innerHTML = ''; // clear any message that might be there
messagebox.classList.add('hidden');
}
else {
messagebox.innerHTML = '<span class="errmsg">You need to include http:// or https:// and include the "www." prefix.</span>';
messagebox.classList.remove('hidden');
}
});
input:invalid {
border-color: red;
}
div {
margin-bottom: 1em;
}
#errormessage {
font-family: sans-serif;
color: red;
border: 1px solid gray;
padding: 1em;
}
#errormessage.hidden {
display: none;
}
<form id="testform" action="#" novalidate>
<div>
Invalid fields will have a red border
</div>
<div>
<label for="onlyweb">Only Web URLs</label>
<input type="url"
name="onlyweb" id="onlyweb"
pattern="^https?://www\..*$"
>
</div>
<div>
<input type="submit" value="Test It">
</div>
<div id="errormessage" class="hidden">
</div>
</form>
I recommend just manipulating classes and writing CSS using the :valid and :invalid pseudo-selectors, rather than changing a bunch of field.style.something=newvalue which have to be coordinated to make sure you do & undo things consistently.
It also mixes style into your code, instead of keeping it in CSS where it belongs.
See MDN's Client-side form validation
for The Constraint Validation API
especially where it gives "A more detailed example"

Answer 2

Yes, it is perfectly possible. However, you must create the validation yourself by attaching a onsubmit function to the form like so:
var input = document.getElementsByTagName('input')[0];
var expression = /(https?:\/\/(?:www\.|(?!www))[a-zA-Z0-9][a-zA-Z0-9-]+[a-zA-Z0-9]\.[^\s]{2,}|www\.[a-zA-Z0-9][a-zA-Z0-9-]+[a-zA-Z0-9]\.[^\s]{2,}|https?:\/\/(?:www\.|(?!www))[a-zA-Z0-9]+\.[^\s]{2,}|www\.[a-zA-Z0-9]+\.[^\s]{2,})/gi;
var regex = new RegExp(expression);
var errorMsg = document.getElementById("errorMessage");
function val(){
var value = input.value;
if(regex.test(value)){
input.style.borderColor="green";
input.style.color="green";
return true;
}else{
input.style.borderColor="red";
input.style.color="red";
errorMsg.style.display="block";
return false;
}
}
#errorMessage{
color:red;
display:none;
}
.input{
width: 80%;
margin: auto;
}
input{
width: 80%;
margin: auto;
padding: 2em;
border-radius: 25px;
outline: none;
border: 1px solid black;
}
<form action="stackoverflow.com" onsubmit="return val()">
<div class="input">
<input>
<p id="errorMessage">Yikes! That's not a valid URL.</p>
</div>
</form>

Answer 3

You can use the input type url and then check the validity using .checkValidity().From Mozilla on the checkValidity method: checks whether the element has any constraints and whether it satisfies them. If the element fails its constraints, the browser fires a cancelable invalid event at the element, and then returns false.
It's also important to note that when one says URL validation, what exactly do they refer to when referencing a url? One could write in a url address bar, www.stackoverflow.com and they would end up at stackoverflows web site, however, the URL validation will require that the valid protocol http, https is called in the url address in order to validate using an input url type. More info on url can be found here... What is a URL? -Mozilla
const input = document.getElementById("url");
const errorMessage = document.getElementById("errorMessage");
const validate = document.getElementById("validate");
validate.addEventListener('click', (e) => {
e.preventDefault();
if (input.checkValidity() !== true) {
input.className = 'false';
input.classList.remove('true');
errorMessage.style.display = 'block';
} else {
input.className = 'true';
input.classList.remove('false');
errorMessage.style.display = 'none';
}
})
#errorMessage {
display: none;
color: orange;
}
.true {
border: 1px solid green;
color: green;
}
.false {
border: 1px solid orange;
color: orange;
}
input#url {
border-radius: .9rem;
padding: .7rem;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form novalidate>
<input id="url" type="url" required />
<input type="submit" name="validate" value="Check" id="validate">
</form>
<p id="errorMessage">Yikes! That's not a valid URL.</p>