JSFiddle - React, Tailwind, and code Playground

by AdityaParab

HTML

<table>
    <tr>
        <td><input type="text" required val-min="1" val-max="10" size="3" onChange="validate(this)"></td>
        <td class="noborder"></td>
    </tr>
    <tr>
        <td><input type="text" required val-min="11" val-max="33" size="3" onChange="validate(this)"></td>
        <td class="noborder"></td>
    </tr>
    <tr>
        <td><input type="text" required val-min="33" val-max="40" size="3" onChange="validate(this)"></td>
        <td class="noborder"></td>
    </tr>
</table>

JavaScript

function validate(elem) {
    var x, text;
    x = +elem.value; // Prepended + sign will parse whatever follows to integer.
    var min = elem.getAttribute('val-min');
    var max = elem.getAttribute('val-max')
    if (isNaN(x) || x < min || x > max) {
        text = "Temp Out of Tolerance";
    } else {
        text = " ";
    }
    elem.parentNode.nextElementSibling.innerHTML = text;
}