I’ve written a jQuery plugin that accepts css colors for some of its parameters.
I want to validate them. If it was just a hex or rgb value I could do that with a regular expression, but how do I validate all 147 valid color names without bloating the plugin?
I was wondering if there is some way of attempting to apply a style (maybe with jquery) and then catching an error from the browser if it is not valid?
Edit: powtac and Pantelis came up with a solution, but they both missed edge cases, so I am including a full solution here:
var validateCssColour = function(colour){ var rgb = $('<div style="color:#28e32a">'); // Use a non standard dummy colour to ease checking for edge cases var valid_rgb = "rgb(40, 227, 42)"; rgb.css("color", colour); if(rgb.css('color') == valid_rgb && colour != ':#28e32a' && colour.replace(/ /g,"") != valid_rgb.replace(/ /g,"")) return false; else return true; };
Advertisement
Answer
All of the solutions posted on this page are incorrect when the string in question is the same colour as the test colour. Granted, you could use a very unlikely choice of colour, but I would prefer to go for 100% success rate.
OP has a single typo in his code (see condition with colon), and does not test for “#28e32a”, so that colour will fail, and the regex will collapse whitespace within the colour, so “#28e 32a” would (incorrectly) pass.
In normal JavaScript, this should have 100% success:
function validTextColour(stringToTest) { //Alter the following conditions according to your need. if (stringToTest === "") { return false; } if (stringToTest === "inherit") { return false; } if (stringToTest === "transparent") { return false; } var image = document.createElement("img"); image.style.color = "rgb(0, 0, 0)"; image.style.color = stringToTest; if (image.style.color !== "rgb(0, 0, 0)") { return true; } image.style.color = "rgb(255, 255, 255)"; image.style.color = stringToTest; return image.style.color !== "rgb(255, 255, 255)"; }
JSFiddle: http://jsfiddle.net/WK_of_Angmar/xgA5C/