JSFiddle - React, Tailwind, and code Playground

HTML

<input class="input" type="text" data-val="0.5" value="0.5">
<input class="input" type="text" data-val="1.5" value="1.5">
<input class="input" type="text" data-val="1" value="1">

CSS

input,
input:focus,
input:active {
  outline: none;
}

.error {
  border-color: #FF0000;
}

JavaScript

$('input').on('keyup', function () {
	let value =  parseFloat($(this).val().replace(',', '.'));
	let required =  parseFloat($(this).attr('data-val').replace(',', '.'));

	const value_length = `${value}`.length;
	const required_length = `${required}`.length;

	if (value < required && value_length >= required_length) {
		$(this).val(`${value}`.slice(0, -1)).addClass('error');
	} else {
		$(this).removeClass('error');
	}
});