JSFiddle - React, Tailwind, and code Playground

by georgianastasov

HTML

<script src="https://igniteui.com/js/modernizr.min.js"></script>
<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
<script src="https://cdn-na.infragistics.com/igniteui/latest/js/infragistics.core.js"></script>
<script src="https://cdn-na.infragistics.com/igniteui/latest/js/infragistics.lob.js"></script>
<link href="https://cdn-na.infragistics.com/igniteui/latest/css/themes/infragistics/infragistics.theme.css"
    rel="stylesheet">
</link>
<link href="https://cdn-na.infragistics.com/igniteui/latest/css/structure/infragistics.css" rel="stylesheet">
</link>

<div class="numeditor">
    <label for="numeditor">Numeric Editor: </label>
    <input id="numeditor"></input>
</div>

CSS

.numeditor {
    display:flex;
    justify-content: center;
    align-items: center;
}

JavaScript

$(function () {
    var rawValue = "24010000221192.12345";

    $("#numeditor").igTextEditor({
        value: rawValue,
        width: 250,
        validatorOptions: {
            pattern: /^[0-9]+(?:\.[0-9]{5})?$/,
            onblur: true,
            errorMessage: "Enter a number with exactly 5 decimals."
        }
    });
});