JSFiddle - React, Tailwind, and code Playground

by ttamminen

HTML

<label for="my-control-to-validate">
    Nimi
    <input type="text" id="my-control-to-validate" />
</label>

<div class="indicator"></div>

CSS

.indicator {
    background-color: yellow;
    width: 32px;
    height: 32px;
    border: 1px solid gray;
    margin-top: 32px;
}

JavaScript

$(document).ready(function () {
    $('#my-control-to-validate').keyup(validate);
});
    
function validate() {
    var $indicator = $('.indicator');
    var value = $(this).val();
    if(!value)
    {
        $indicator.css('background-color', 'red');
    }
    
    if(value.indexOf('s') >= 0) {
        $indicator.css('background-color', 'green');
    }
    else {
        $indicator.css('background-color', 'red');
    }
    
}