JSFiddle - React, Tailwind, and code Playground

by web-nfo.com

JavaScript

// The input field can have a maximal length of characters
//<input type="text" maxlength="5" placeholder="12345" />
//Or, if you want to have max 5 characters, 1 separator, AND 2 decimals:
//<input type="text" maxlength="8" placeholder="12345.12" />


//The javascript validations

//The quick solution (allows comma's + dots)
var value = "15,5"; // Input field (string)

if(!isNaN(parseFloat(value)) && value.length <= 5) {
    console.log('true, continue');
} else {
    console.log('false');
}

// If you only want to allow dots, add: isInfinite()
var value = "145,5"; // Input field (string)

if(!isNaN(parseFloat(value)) && isFinite(value) && value.length <= 5) {
    console.log('true, continue');
} else {
    console.log('false');
}

//If you mean that the first digits (not including the decimals!) can have a length of 5, then this is the way to go:

//You first want to check if the input is numeric, then force the two digits.
//At last you can check if the length is lower or equal to 8 (5 digits + 1 separator + 2 decimals = 8)

var value = "12345.58852"; // Input field (string)

if(isNumeric(value) && parseFloat(value).toFixed(2).length <= 8) {
    console.log('true, continue');
} else {
    console.log('false');
}

function isNumeric(value, strict)
{
    var strict = (typeof strict == 'undefined' ? false : (strict == true ? true : false));
    if(strict && typeof value != 'number') {
        return false;
    }
    return !isNaN(parseFloat(value)) && isFinite(value);
}