JSFiddle - React, Tailwind, and code Playground
HTML
<select class="SomeOtherBox">
<option>--</option>
<option>1</option>
<option>2</option>
</select>
<input type="text" class="NumbersOnly" />
CSS
.TextBoxError{
background:red;
color:white;
}
JavaScript
$(Start);
function Start() {
$('body').on({
keyup: function () { TestNumbersOnly($(this));},
focus: function () { SomeFunction($(this)); }
}, '.NumbersOnly');
}
function TestNumbersOnly(TheBox) {
var TheInput = TheBox.val();
var TheCleanInput = TheInput.replace(/\D/g, '');
TheBox.val(TheCleanInput);
}
function SomeFunction(TheBox) {
var TheOtherBox = TheBox.prev('.SomeOtherBox');
if ($.isNumeric(TheOtherBox.val()) === false) {
TheBox.triggerHandler("blur");
TheOtherBox.addClass('TextBoxError');
setTimeout(function () {
TheOtherBox.removeClass('TextBoxError');
}, 500);
}
}