JSFiddle - React, Tailwind, and code Playground

by kurotanshi

HTML

<form>
    <input type="text" id="num" name="number" />
    <span id="msg"></span>
</form>

CSS

.border-red{
    border:1px #FF0000 solid;
}

JavaScript

$(document).ready(function() {

    $("input[type=text]").focus(function() {
        $(this).addClass("border-red");
        $('#msg').html('');
    }).blur(function() {
        $(this).removeClass("border-red");
        // RegExp.
        var rege = /^\d+$/;
        
        // validate
        if (!rege.test($('#num').val())) {
            $('#msg').html("Must be a number!");
        }
        else{
            $('#msg').html("ok.");
        }
    });
});