JSFiddle - React, Tailwind, and code Playground

by Bryan Weaver

HTML

<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<div id="requestActionTypeRow">
    <ul class="requestActionType">
        <li class="ax_text_field">
            <input type="radio" id="radio1" name="radio" value="radioAcctInp" checked="checked">Account&nbspNumber</li>
        <li class="ax_text_field">
            <input type="radio" id="radio2" name="radio" value="radioSwiftInp">Show&nbspalphaNumeric&nbspAddress</li>
    </ul>
</div>
<div id="enterRequestDataSection">
    <ul class="enterRequestDataType">
        <li>
            <input type="text" id="requestedInput" name="acctNumber" value="Update Address using Account Number" maxlength="10" class="inputNumTextBox keyup-numeric">
        </li>
        <li id="showDetails" name="showDetails" value="Show Details" onclick="validateAcctMaint(this.form)">Show Details</li>
        <li class="addNewLink">Add New</li>
    </ul>
</div>

JavaScript

$(document).ready(function () {
    $("#radio1").click(function () {
        $('p.error-keyup-1').remove();
        $("#requestedInput").val("Update Address using Account Number").attr('name', 'acctNumber').attr('maxlength', '10');
        $("#requestedInput").removeClass().addClass('inputNumTextBox keyup-numeric');
    });
    $("#radio2").click(function () {
        $('p.error-keyup-1').remove();
        $("#requestedInput").val("Update Account Number using Address").attr('name', 'Address').attr('maxlength', '23');
        $("#requestedInput").removeClass().addClass('inputNumTextBox keyup-charNumOnly');
    });
    $('.keyup-numeric').keyup(function () {
        $('p.error-keyup-1').remove();
        var inputVal = $(this).val();
        var numericReg = /^\d*[0-9](|.\d*[0-9]|,\d*[0-9])?$/;
        var AcctReg9 = /^9/;
        if (!numericReg.test(inputVal)) {
            $('<p class="error-keyup-1 errorStyle centerText">Numeric characters only</p>').appendTo('#enterRequestDataSection');
        }
        if (!AcctReg9.test(inputVal)) {
            $('<p class="error-keyup-1 errorStyle centerText">Accounts Start with 9 .... Required</p>').appendTo('#enterRequestDataSection');
        }
        if ($('#requestedInput').val().length === 0) {
            $('p.error-keyup-1').remove();
        }
    });

    $('.keyup-charNumOnly').keyup(function () {
        alert('keyup-charNumOnly I');
        $('p.error-keyup-1').remove();
        var inputVal = $(this).val();
        var characterReg = /^\s*[a-zA-Z0-9,\s]+\s*$/;
        if (!characterReg.test(inputVal)) {
            alert('keyup-charNumOnly II');
            $('<p class="error-keyup-1 errorStyle centerText">cRAP</p>').appendTo('#enterRequestDataSection');
        }
        if ($('#requestedInput').val().length === 0) {
            $('p.error-keyup-1').remove();
        }
    });

}); // End of JQUERY CODE