tags-input icon indicating copy to clipboard operation
tags-input copied to clipboard

pattern= doesn't seem to work as expected

Open mikemaccana opened this issue 8 years ago • 2 comments

See jsfiddle at http://jsfiddle.net/d5w4jpxq/71/ :

<input name="hashtags" type="tags" pattern="^#" placeholder="#hashtags">

Still allows data that doesn't start with a hash to be entered. The docs mention HTML5 pattern support - should we use pattern to limit the input or should we do this via change events?

mikemaccana avatar Jan 18 '17 12:01 mikemaccana

PS - thankyou Jason!

mikemaccana avatar Jan 18 '17 12:01 mikemaccana

@mikemaccana Looks like there were actually a few copies of tags-input.js on that page and the one being used didn't have a placeholder defined. I've modified it to just use one copy. Also the placeholder attribute is a pre-anchored regex, so the pattern was invalid. Here's an example with a valid placeholder and some CSS to show validation state:

http://jsfiddle.net/developit/nL1h3dwk/

However, you're right - the field gets marked as invalid like we would expect, but tags-input doesn't care and happily adds the tag. The fix here should be pretty simple - we need to have the method that commits a tag from the input field first check that input.validity.valid is true.

developit avatar Jan 18 '17 17:01 developit