Validating CSS Color Names

Validating css color names

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/

Javascript - check if string is valid CSS color?

Here's a simple function that checks color name support in the current browser:

function isColor(strColor){
  var s = new Option().style;
  s.color = strColor;
  return s.color == strColor;
}

// try it out
isColor("red");   // true
isColor("reds");  // false

Since an invalid CSS property value will not persist, we can compare an attempted set value with the value we meant to set, and if they match, we know the color/property is valid.

Note this will also approve hex, RGB, etc. You can screen those out with a RegExp or two if that's an issue for your application.

CSS background colour validity

Make a list from the W3 Specifications.

Then check to see if your color is in that list. Here is an example.

colors = ['lime', 'orange', 'pink'];

if (colors.indexOf(the_color) >= 0) {
    // Set background
}

How to validate CSS3 HSLA color values?

This is a known validator bug which has been reported. Your CSS declarations are all valid, and there's nothing you can or need to do about the validator failing to recognize them.

By the way, the spec you cite is out of date; the CSS3 Color Module is already a W3C Recommendation.

validating html color codes JS

You can match hexadecimal colors like this:

if (/^#[0-9a-f]{3}([0-9a-f]{3})?$/i.test(str)) {
    //Match
}

Note that this wont handle names or rgb(n, n, n).

You can match rgb(x, y, z) colors like this:

if (/^rgb\s*(\s*[012]?[0-9]{1,2}\s*,\s*[012]?[0-9]{1,2}\s*,\s*[012]?[0-9]{1,2}\s*)$/i.test(str)) {
    //Match
}

Note that this will match rgb(299, 299, 299).

Change color of input name and error message when validation is failed

You need to wrap each input control and its label in a container, then you can use the highlight and unhighlight methods to add the error class to the container

jQuery(function ($) {    var validator = $('#news_action').validate({        rules: {            name: {                required: true            },            email: {                required: true,                email: true            }        },        messages: {},        highlight: function (element) {            $(element).parent().addClass('error')        },        unhighlight: function (element) {            $(element).parent().removeClass('error')        }    });});

#news_action .error {    color: red;}

<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.js"></script><script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.12.0/jquery.validate.js"></script><script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.12.0/additional-methods.js"></script><form id="news_action" method="post" action="">    <div class="info">        <div>Type your name:<input id="input-name" type="text" name="name"/></div>        <div>Type your email:<input type="text" name="email"/></div>    </div>    <input type="submit" class="button" value="Submit" /></form>

jQuery validate change color of element background

The invalid elements get a class of error by default, or in your case jqInvalid since you've set the errorClass option, just style that class like you want in the stylesheet, for example:

.jqInvalid { background: #ffdddd; }

You can override the specifics for the error messages (the default element being <label>) if you want:

label.jqInvalid { background: none; }

This CSS approach takes care of the removal...since the class is removed once it's valid. There's also a success class if you want a green background applied to valid elements, etc.

---

Related Topics