0

I'm trying to validate if a URL ends with .png:

/.[a-zA-z]\.(png)$/i

However, it doesn't seem to be working when using it as a value for a pattern attribute, but everything seems to be fine here (regex101.com).

<form action="#">
  <input type="url" pattern="/.[a-zA-z]\.(png)$/i" value="" required >
  <input type="submit" value="submit"/>
</form>

A test string to validate:

http://imgur.com/foo.png

I want to match o.png or everything after the last forward slash and ends with a .png

Improve this question
8
  • 2
    You don't need g flag for "ends with". Commented Feb 3, 2018 at 17:02
  • console.log(/\.png$/.test('adasdaads.png')) Commented Feb 3, 2018 at 17:04
  • In what way not working? It's letting things pass that shouldn't or stopping things that should pass? Commented Feb 3, 2018 at 17:05
  • 1
    If all you need is to check wither it ends with ".png" then all you need is \.png$ -- the rest of the regex is unnecessary. Commented Feb 3, 2018 at 17:16
  • 1
    Many websites do optimization and don't use any extension to make dynamic images with adoptive sizes and compression. Dynamic generated image like this one is still a png but don't have any extension. some url do but added a .png?width=200. and serve it as jpeg or webp (depending on accept header) I think you should accept any url, make a (head or normal) request and check if the content-type is image/png and possible abort the request Commented Feb 3, 2018 at 17:23

2 Answers 2

Reset to default
3

You don't have to put your regex between forward slashes.

Right now your regex matches:

  • any charcter .
  • and upper or lowercase character [a-zA-Z]
  • a dot \.
  • dot png in a captured group (\.png)

So this would match an url with 2 characters and then .png.

You could use ^.+\.png to match any character one or more times .+ and then match dot png at the end of the line \.png$.

You can extend the .+ to match your criteria.

<form action="#">
    <input type="text" pattern="^.+\.png$" value="" required >
    <input type="submit" value="submit"/>
</form>

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

don't work with dynamic generated images like this: foo.png?size=400
2

From the docs:

pattern

A regular expression that the control's value is checked against. The pattern must match the entire value, not just some subset. Use the title attribute to describe the pattern to help the user. This attribute applies when the value of the type attribute is text, search, tel, url, email, or password, otherwise it is ignored. The regular expression language is the same as JavaScript RegExp algorithm, with the 'u' parameter that makes it treat the pattern as a sequence of unicode code points. The pattern is not surrounded by forward slashes.

<form action="#">
  <input type="text" pattern=".[a-zA-z]\.(png)$" value="" required >
  <input type="submit" value="submit"/>
</form>

Improve this answer

3 Comments

Thanks for the answer. But it still doesn't seem to be working for me
@user3284463 Well, it works according to the regex you provided. If the regex is incorrect, then that's a different thing.
@Rusty, I am facing a similar issue. When I test in online testers like rgexr.com, my patterns look to work fine but on my code editor, or in the Dreamweaver, don‘t work. Five years later, can you please tell me if you found the answer?

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.