JSFiddle - React, Tailwind, and code Playground

by Ishank Dubey

HTML

<div id="myComponent">
    
    <select type="button" data-btn="btn" onclick="inputButtonClick()" onchange="selectChange()" onblur="selectBlur()">
        <option value="">choose</option>
        <option value="item1">item1</option>
        <option value="item2">item2</option>
        <option value="item3">item3</option>
    </select>
    
    
    <button onblur='blurb()' onclick='clickb()'>Blur</button>
</div>

CSS

input.error {color: red; border: 1px solid red;}

JavaScript

window.focusb = function(){
 //alert('foc');
 console.log('focus');
}
window.blurb = function(){
 console.log('blurt');
}

window.clickb = function(){
 //alert('blurb');
 console.log('click');
}

window.validate = function(input) {
    //do your validation
    var val;
    console.log("Validating");
    val = input.val();
    
    if ( !val || !val.length) {
        input.addClass("error");
        console.log("Something is invalid");
    } else {
        //all good
        console.log("All valid");
    }
    //clear error after x time to retry
    setTimeout(function() {
        $(".error").removeClass("error");
        $("input").removeAttr("data-btn-active") ;
    }, 3000);
}
window.selectBlur = function() {
    var input = $("#" + $(event.target).attr("data-btn"));
    validate(input);
}
window.selectChange = function() {
    var input = $("#" + $(event.target).attr("data-btn"));
    console.log("change", $(event.target).val() );
    input.val( $(event.target).val() );
    validate(input);
}
window.inputButtonClick = function() {
    var input = $("#" + $(event.target).attr("data-btn"));
    input.attr("data-btn-active", "true");
     console.log("inputButtonClick",input );
}
window.inputBlur = function() {
    var input = $(event.target);
    //give a bit of time for user to click on the button
    setTimeout(function() {
        if (!input.attr("data-btn-active" ) ) {validate(input);}
    }, 100);
}
$(document).ready(function() {
    
});