How to access field in custom widget?

[kevzettler]

I'm building a custom widget that I want to render differently depending on if the field data is valid or not.
How do I check the valid state from a widget?

var React = require('react'),
    Base = require('newforms').TextInput;

var UnderlineInput = Base.extend({
    constructor: function UnderlineInput(kwargs) {
        if(!(this instanceof UnderlineInput)) {
            return new UnderlineInput(kwargs);
        }

        Base.call(this, kwargs);
    }
});

UnderlineInput.prototype.render = function(name, value, kwargs) {
    var finalAttrs = this.buildAttrs(kwargs.attrs, {
        name: name
    });

    var valueAttr = kwargs.controlled ? 'value' : 'defaultValue';
    finalAttrs[valueAttr] = value;

    return (
        <div className="underline-input">
            <label>$<input {...finalAttrs} /></label>
        </div>
    );
};

module.exports = UnderlineInput;

[marr]

Untested, but have you tried the :valid and :invalid pseudoselectors?