HTML Input: Require URL to end in specific filetype

Question

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">

As you can see, It is using the URL type, which restricts it to a valid http:// domain, but I would like the input field to only accept .png, .jpg, and .gif files.

Can this be achieved through html or javascript, and if so, how?

Thanks!

Answer 1

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)">

Answer 2

You can achieve this using regex, you would also want to check this server side in case the user has disabled javascript.

Javascript

$("#imageUrl").change(function() {
    var t = $("#imageUrl").val()
    var expression = https?:\/\/(www\.)?[-a-zA-Z0-9@:%._\+~#=]{2,256}\.[a-z]{2,4}\b([-a-zA-Z0-9@:%_\+.~#?&//=]*)(.jpg|.png|.gif);
    var regex = new RegExp(expression);
    if (t.match(regex)) {
        alert("Successful match");
    } else {
        alert("No match");
    }
});

HTML

<input id="imageUrl" name="bg" placeholder="https://website.com/image" type="url">