{"action":"created","issue":{"url":"https://api.github.com/repos/bgrins/TinyColor/issues/60","labels_url":"https://api.github.com/repos/bgrins/TinyColor/issues/60/labels{/name}","comments_url":"https://api.github.com/repos/bgrins/TinyColor/issues/60/comments","events_url":"https://api.github.com/repos/bgrins/TinyColor/issues/60/events","html_url":"https://github.com/bgrins/TinyColor/issues/60","id":43462102,"number":60,"title":"Option to restrict hex to require '#' char (or as validation option) ","user":{"login":"teamrubberandy","id":1780327,"avatar_url":"https://avatars.githubusercontent.com/u/1780327?v=3","gravatar_id":"","url":"https://api.github.com/users/teamrubberandy","html_url":"https://github.com/teamrubberandy","followers_url":"https://api.github.com/users/teamrubberandy/followers","following_url":"https://api.github.com/users/teamrubberandy/following{/other_user}","gists_url":"https://api.github.com/users/teamrubberandy/gists{/gist_id}","starred_url":"https://api.github.com/users/teamrubberandy/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/teamrubberandy/subscriptions","organizations_url":"https://api.github.com/users/teamrubberandy/orgs","repos_url":"https://api.github.com/users/teamrubberandy/repos","events_url":"https://api.github.com/users/teamrubberandy/events{/privacy}","received_events_url":"https://api.github.com/users/teamrubberandy/received_events","type":"User","site_admin":false},"labels":[],"state":"closed","locked":false,"assignee":null,"milestone":null,"comments":13,"created_at":"2014-09-22T10:51:03Z","updated_at":"2015-01-03T02:33:30Z","closed_at":"2014-10-24T16:31:19Z","body":"This library is great, using it to validate and preview user-entered colors in a theming UI.\r\n\r\nOne issue I ran into: \r\n- we write the theming input values straight out into the css as strings.  \r\n- TinyColor will parse 'fff' or 'ffffff' as valid colors (no '#' char).  This is great for ease of use, but when written out as strings into css, the browser doesn't parse these as colors. \r\n\r\nA possible solution for me would be to post-process these when the form is saved.  I'd prefer to restrict the input to valid values though.  I had a read of TinyColor js to see if I had missed any obvious options for this, but didn't spot any. \r\n\r\nIs there an option I'm missing?  Or would you consider providing these, either for TinyColour object init, or for the isValid() function.  NP if this is a weird use case and the answer is no.  Workarounds would be found :)\r\n\r\n-- EDIT --\r\nI wrote additional validation using the private _format property of TinyColor object.  Using the private var might break in future, but it was a lightweight solution that works nicely.\r\n\r\n            var color_is_valid = false;\r\n            if (color.isValid() == true) {\r\n                if (color._format == 'hex') {\r\n                    if (input_value.charAt(0) == '#') {\r\n                        color_is_valid = true;\r\n                    }\r\n                } else if (color._format == 'rgb' || color._format == 'rgba') {\r\n                    if (input_value.charAt(input_value.length-1) == ')') {\r\n                        color_is_valid = true;\r\n                    }\r\n                } else {\r\n                    color_is_valid = true;\r\n                }\r\n            }\r\n"},"comment":{"url":"https://api.github.com/repos/bgrins/TinyColor/issues/comments/68580318","html_url":"https://github.com/bgrins/TinyColor/issues/60#issuecomment-68580318","issue_url":"https://api.github.com/repos/bgrins/TinyColor/issues/60","id":68580318,"user":{"login":"le717","id":3382464,"avatar_url":"https://avatars.githubusercontent.com/u/3382464?v=3","gravatar_id":"","url":"https://api.github.com/users/le717","html_url":"https://github.com/le717","followers_url":"https://api.github.com/users/le717/followers","following_url":"https://api.github.com/users/le717/following{/other_user}","gists_url":"https://api.github.com/users/le717/gists{/gist_id}","starred_url":"https://api.github.com/users/le717/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/le717/subscriptions","organizations_url":"https://api.github.com/users/le717/orgs","repos_url":"https://api.github.com/users/le717/repos","events_url":"https://api.github.com/users/le717/events{/privacy}","received_events_url":"https://api.github.com/users/le717/received_events","type":"User","site_admin":false},"created_at":"2015-01-03T02:33:30Z","updated_at":"2015-01-03T02:33:30Z","body":"@teamrubberandy @bgrins That was one long tomorrow. :stuck_out_tongue:\r\n\r\nHere is my idea for the code behind `isValidCSSColor()`, which does not use the DOM.\r\n\r\n1. Start by checking the input type (rgb/hsv, hex, keyword)\r\n2. If keyword, check if it is a key in `tinycolor.names` and return that (`tinycolor.names[color] !== undefined`\r\n3. If hex, a simple `value.charAt(0) === \"#\"` should do.\r\n4. If rgb/hsv, use a regex (that still allows flexible input) to confirm the syntax.\r\n5. If it is in scope of the method purpose, run the last two though `isValid()`.\r\n\r\nMy gist linked above is a proof-of-concept way of performing the hex and rgb/hsv validiation. The latter's regex would need expanding to support more whitespace in the value, but as you can see by running the code, it does accurately check the syntax validity."}}