How can I make a URL Input form require the input to be both a valid URL, and end in a specific filetype.
For example, this is my input:
<input name="bg" placeholder="https://website.com/image" type="url">
You don't really need Javascript here, you can use pattern
attribute for your input
(i have added CSS just for example):
input:valid {
border: 1px solid green;
}
input:invalid {
border: 1px solid red;
}
<input name="bg" placeholder="https://website.com/image" type="url" pattern="https?:\/\/(www\.)?[-a-zA-Z0-9@:%._\+~#=]{2,256}\.[a-z]{2,4}\b([-a-zA-Z0-9@:%_\+.~#?&//=]*)(.jpg|.png|.gif)">