JSFiddle - React, Tailwind, and code Playground

HTML

<form>
  Phone Number: <input type="text" name="firstname" class="validate"> <div class="error"> Error! Only numericals allowed.</div>
</form>

JavaScript

$(".error").hide();
$(".validate").keypress(function (event) {

        var key = event.which || event.keyCode; //use event.which if it's truthy, and default to keyCode otherwise

        // Allow: backspace, delete, tab, and enter
        var controlKeys = [8, 9, 13];
        //for mozilla these are arrow keys
        if ($.browser.mozilla) controlKeys = controlKeys.concat([37, 38, 39, 40]);

        // Ctrl+ anything or one of the conttrolKeys is valid
        var isControlKey = event.ctrlKey || controlKeys.join(",").match(new RegExp(key));

        if (isControlKey) {return;}

        // stop current key press if it's not a number
        if (!(48 <= key && key <= 57)) {
            event.preventDefault();
            return;
        }
    });

$('.validate').keyup(function () {
     
    var regex = new RegExp(/[^0-9]/g);
    var containsNonNumeric = this.value.match(regex);
    if (containsNonNumeric)
      $(".error").show();
    else $(".error").hide();
      //this.value = this.value.replace(regex, '');
});