Soham Shetty Soham Shetty - 6 months ago 39
CSS Question

How to check String "green" is valid color or not in Jquery?

I have scenario where user provide color name. For that I first need to check user provided color name is valid or not using jquery.

For example user can provide values orange, ornge typo.

How to check.

Any help will be best for me.


You can use following method to validate css color

  1. Create a temporary element
  2. Set any color using css('backgroundColor', 'white')
  3. After apply with the input value as backgroundColor using d.css('backgroundColor', this.value);
  4. Check the the color is changed or entered value is same that we are initially set, in that case it's a valid color

$('#input').keyup(function() {
  if (this.value.trim()) {
    var d = $('<span/>')
      .css('backgroundColor', 'white')
      .css('backgroundColor', this.value);
    $('#op').html(this.value + (d.css('backgroundColor') == '' && this.value + (d.css('backgroundColor') != 'white' && d.css('backgroundColor') != 'rgb(255, 255, 255)') || /^white$/i.test(this.value) ? ' is valid' : ' is not valid'));
  } else
<script src=""></script>
<input type="text" id="input">

<div id="op"></div>