JSFiddle - React, Tailwind, and code Playground

by Ehsan Sajjad

HTML

<form action="">
    <input id="name1" type="text"></input>
    <input id="name2" type="text"></input>
    <input id="name3" type="text"></input>
    <input type="button" value="submit"></input>
</form>

JavaScript

$(document).ready(function () {
    $("form input:text").on('focus', function () {
        if ($(this).val() === "") {
            $(this).css({
                "border": "1px solid red"
            });
        }
    });

    $("form input:text").on('blur', function () {

        if ($("#name1").val() != "") $(this).css({
            "border": "1px solid green"
        });


    });
});