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!
3 Answers
Answers 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)">Answers 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"> Answers 3
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>
0 comments:
Post a Comment