JSFiddle - React, Tailwind, and code Playground

by mori57

HTML

<form id="provision">ESNList:
    <input type="text" id="ESNList" name="ESNList" size="30" />
    <br />ESN Start:
    <input type="text" id="ESNStart" name="ESNStart" size="10" />
    <br />ESN End:
    <input type="text" id="ESNStart" name="ESNStart" size="10" />
    <br />UnitName:
    <input type="text" id="STxName" name="STxName" size="30" />
    <br />Unit Model:
    <select name="STxName" id="ddl_StxName">
        <option value="stx2">STX2</option>
        <option value="stm3" selected>STM3</option>
        <option value="acutec">Acutec</option>
        <option value="trackpack">Trackpack</option>
        <option value="mmt">MMT</option>
        <option value="smartone">Smartone</option>
        <option value="smartoneb">SmartOneB</option>
    </select>
    <br />RTU Model Type:
    <select name="rtumodel" id="ddl_rtumodel">
        <option value="globalstar">GlobalStar</option>
        <option value="both">Both</option>
        <option value="comtech">Comtech</option>
        <option value="stmcomtech">STMComtech</option>
    </select>
    <br />
    <input type="submit" value="submit" />
    <br />
    <textarea id="output" rows="6" cols="44"></textarea>
</form>

JavaScript

$(function () {
        var out = $("#output");
        var debug = function(txtIn){
            out.val(out.val() + "\n" + txtIn);
        };
        // store your ranges here, in an array
        var ranges = [
            [986329,999999],
            [660000,699999],
            [200000,299999],
            [1202114,1299999]
        ];
        
        // store the activeRange that is set by the first item in the comparison loop
        var activeRange = -1;
        
        // use this to test the a value against a given range array
        var withinRange = function(comparitor, range) {
            return (comparitor >= range[0] && comparitor <= range[1]);
        };
        
        $(":text").css("border", "2px solid red");
        // start the test onBlur, rather than on keyup
        $(":text").blur(function () {
            var enteredData = $(this).val()
            console.log(enteredData);
            if (enteredData == "") {
                $(this).css("border", "2px solid red");
            } else {
                $(this).css("border", "inherit");
            }
            if ($(this).attr("id") == "ESNList") {
                esnList = enteredData.split(',');
            }

            // loop through your values...
            for (var i = 0; i < esnList.length; i++) {
                // store the current value, rather than re-parseInt'ing it for every comparison
                var intVal = parseInt(esnList[i]);
                
                debug("intVal = " + intVal);
                
                // now, find out if an activeRange has been set
                if(activeRange == -1) {
                    // if not, we need to find out what the activeRange is
                    if (withinRange(intVal, ranges[0])) {
                        activeRange = ranges[0];
                    } else if (withinRange(intVal, ranges[1])) {
                        activeRange = ranges[1];
                    } else if (withinRange(intVal,ranges[2]))...