How to validate css when we add css in textarea value?

Question

I've write css in textarea but need to validate that css which I'm writing it's properties and value is correct or not ?

I've to develop a feature like real time css change along with validating that css For instance if I write .abc { text : text; } then this text is not a valid property nor valid css so I have to show notification/error in textarea itself like : This text is not a valid css

Html Code :

<textarea id="txtCSS" name="txtCSS" rows="14" cols="50">
    .FC{color:blue; margin: 40px; padding: 50px;}
    .cf{color:blue; margin: 40px; padding: 50px; }
</textarea>
<label class="FC">Some Text</label>
<div class="cf">test Text</div>

JavaScript Code :

function render(value) {
        let previewStyle = document.getElementById('previewStyle');
        if (!previewStyle) {
            addStyle(value);
        } else {
            previewStyle.innerText = value;
        }
    }
    function addStyle(styles) {
        /* Create style document */
        const css = document.createElement('style');
        css.type = 'text/css';
        css.id = 'previewStyle';
        if (css.styleSheet) {
            css.styleSheet.cssText = styles;
        } else {
            css.appendChild(document.createTextNode(styles));
        }
        /* Append style to the tag name */
        document.getElementsByTagName("head")[0].appendChild(css);
    }
    const text = document.getElementById('txtCSS');
    text.addEventListener('input', (e) => {
        const content = e.target.value;
        render(content);
    });
    render(text.value);

Referance Image :

Note: there's a difference between "syntax valid" css and css that's "valid". eg add body {display:none;} to your textarea... you might like to rethink your approach: add an iframe and change the css in that iframe so that it doesn't affect the page that you're using to input the values. — fdomn-m
– fdomn-m, Commented Mar 10, 2022 at 12:39
Previously asked here (though in 2010, so may be a newer solution) - quick google and most suggestions are, like that answer, to use an existing validator, either online or download. — fdomn-m
– fdomn-m, Commented Mar 10, 2022 at 12:41
@freedomn-m is this will be used in my existing project as I've to develop a feature like real time css change along with validating that css For instance if I write .abc { text : text; } then this text is not a valid property nor valid css so I have to show notification/error in textarea itself like : This text is not a valid css — Kaushal Joshi
– Kaushal Joshi, Commented Mar 10, 2022 at 12:50
Does this answer your question? Format and Validate CSS with jquery — kmoser
– kmoser, Commented Mar 10, 2022 at 15:02

pankaj sondagar · Accepted Answer · 2022-03-11 13:08:28Z

2

You can try like below It should work

   const validatorURL = 'https://jigsaw.w3.org/css-validator/validator' +
  '?uri=http%3A%2F%2Fwww.w3.org%2F&profile=css3&output=json';
fetch(validatorURL)
  .then(response => response.json())
  .then(results => console.log(results))

answered Mar 11, 2022 at 13:08

pankaj sondagar

567 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Kaushal Joshi Over a year ago

Yes this is working for me For Refernce : jsfiddle.net/Kaushal_Joshi/gfu8aL9j/17

Collectives™ on Stack Overflow

How to validate css when we add css in textarea value?

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related