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!

@CommercialSuicide It needs to be an image link like http://domain.com/image.png, so it needs to stay as a URL Input, but accept only image links. — Carter Roeser, Nov 18 '16 at 23:40
Any JavaScript validation method can be easily be disabled/overridden by a decent scriptkiddy. Regard JavaScript validation as a helper for non-malicious users (you reduce number of calls to server while letting them know about common errors/limitations), not as a way of excluding malicious users. You can only handle those server-side. — tao, Nov 18 '16 at 23:43
@CarterRoeser but it will always exists an extension? If so, you can use this solution http://stackoverflow.com/a/12818466/2990234 — Anfuca, Nov 18 '16 at 23:43

score 17 · Accepted Answer · answered Nov 18 '16 at 23:57

17

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

answered Nov 18 '16 at 23:57

P.S.

15,970
14
62
86

1

I don't think this regex is right. It validates `http://hello.com.jpg` correctly. Not sure how to correct it though :/ – TheChetan Jul 06 '17 at 04:24
For anyone wanting to take a stab at it. https://jex.im/regulex/ http://regexr.com/ may help. Without Quantifier Captures being in JavaScript REGEX's. It's a tough nut to crack .http://www.rexegg.com/regex-quantifier-capture.html. I think the regex can be simplified with \.(jpg|png|gif) at end and the double // looks wrong only 1 needed right? – JGFMK Jul 08 '17 at 20:56

Kevin Doveton · Answer 2 · 2016-11-18T23:59:33.927

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

score 2 · Answer 3 · answered Jul 06 '17 at 11:29

Please go through the below code you will get the valid or invalid image url by blur the textbox.

function TextBoxChange()
{
var textboxValue=$("input[name=bg]").val();
var pattern=/https?:\/\/.*\.(?:png|jpg|gif)/i;
//alert(/https?:\/\/.*\.(?:png|jpg|gif)/i.test(textboxValue));
if(pattern.test(textboxValue))
{
$("#errorMsg").text("valid");
}
else
{
$("#errorMsg").text("invalid");
}
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input name="bg" placeholder="https://website.com/image" onblur="TextBoxChange()" type="url" >
<label id="errorMsg"></label>

HTML Input: Require URL to end in specific filetype

3 Answers3