Option to restrict hex to require '#' char (or as validation option) about tinycolor HOT 13 CLOSED

Off the top of my head, I think this could be validated using the DOM before passing it into the tinycolor function. Maybe something like:

function isValidCSSColor(c) {
  var foo = document.createElement("div");
  foo.style.backgroundColor = c;
  return foo.style.backgroundColor !== "";
}

console.log(isValidCSSColor("red")); // true
console.log(isValidCSSColor("#f00")); // true
console.log(isValidCSSColor("f00")); // false

This would also handle cases like hsv or unparenthesized rgb, hsl and unsupported units.

from tinycolor.

I'm not sure how well it would fit into the API, but it might be a handy utility to be able to:

var color = tinycolor("red");
color.isValidCSSColor()

from tinycolor.

isValidCSSColor() would work very well for the case I have, thanks. If it doesn't fit into the API, don't worry about it, the case I have is solved, just it's an ugly solution. :)

from tinycolor.

The only issue with regards to the API is that it would rely on running in a browser environment, and it's supported in node

from tinycolor.

Doesn't this already exist?

console.log(tinycolor("fff").toHexString());

from tinycolor.

@le717 I think the request is for that not to work. Basically, @teamrubberandy is wanting anything that isn't a valid css color to not parse (like "fff", "rgb 255 0 0", "hsv (0, 100%, 50%)", {r:1,g:1,b:1}, etc)

from tinycolor.

Yup, my aim is to validate user input, and fail if not valid css colors.

The generous parsing behaviour is neat, but the user input in my case is passed on as vars a less compile which then whines at me when it's invalid (or, in production, would blow up all over the user) :)

from tinycolor.

My question is this: are you, @teamrubberandy, wanting to restrict invalid syntax, values, or both?

from tinycolor.

Sorry about that, on mobile ATM. Hit the wrong button. :)

from tinycolor.

For my case, invalid syntax, specifically cases like "fff" and "rgb 255 0 0".

Invalid values are already caught by calling isValid() against user input (and showing failure appropriately to user). :)

from tinycolor.

Hmmm... I have an idea for this. Will post later.

from tinycolor.

I wish I could explain further, but I GTG and can't until tomorrow. :(

Anyway, my idea was to check the input against a regex / charAt(0) (for Hex) that searched for proper structure, then returned true or false on the outcome. The color format would be determined as best as possible before checking against the regex. Rough idea of what I refer to (download and run, sorry, no JSFiddle):

https://gist.github.com/le717/63faf91c76c99fb0952f

Thoughts?

from tinycolor.

@teamrubberandy @bgrins That was one long tomorrow. 😛

Here is my idea for the code behind isValidCSSColor(), which does not use the DOM.

1. Start by checking the input type (rgb/hsv, hex, keyword)
2. If keyword, check if it is a key in tinycolor.names and return that (tinycolor.names[color] !== undefined
3. If hex, a simple value.charAt(0) === "#" should do.
4. If rgb/hsv, use a regex (that still allows flexible input) to confirm the syntax.
5. If it is in scope of the method purpose, run the last two though isValid().

My 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.

from tinycolor.