[brp80000]

Std 1-3 символа 0-7FF
Ext 3-5 символа 800-7FFFF
Что то никак не работает ... где ошибка?

<style>
.max1:invalid {
    font-weight: Bold;
    margin-top: 5px;
	margin-bottom: 5px; 
    color: red }
.max1:valid {
    font-weight: Bold;
    margin-top: 5px;
	margin-bottom: 5px; 
    color: black;} 
</style>

<form>
<div>
	<select name ="CanFrame" id="CanFrame">
	<option value="Std" data-min-max="0-7FF" data-len-min-max="1-3">Std</option>
	<option value="Ext" data-min-max="800-7FFFF" data-len-min-max="3-5">Ext</option>
	</select>
	<div>
	<input id="CanID" name="CanID" class="max1" size="5" pattern="[A-F\d]"/>
	</div>
</div>
</form>

<script>
const select = document.getElementById('CanFrame')
const hex = document.getElementById('CanID')
const update = (e) => {
var [min, max] = select.options[select.options.selectedIndex].dataset.minMax.split('-')
var [lmin, lmax] = select.options[select.options.selectedIndex].dataset.lenMinMax.split('-')
var lvalid = hex.value.toString(16).length >= lmin && hex.value.toString(16).length <= lmax
if (!lvalid && !hex.value.toString(16).length <= lmax) {
hex.value = hex.value.substr(0, lmax)
}
var value = parseInt(hex.value, 16)
if (value.toString(16) === hex.value.toLowerCase() && value >= parseInt(min, 16) && value <= parseInt(max, 16)) {
hex.classList.contains('invalid') && hex.classList.remove('invalid')
} else !isNaN(value) && !hex.classList.contains('invalid') && hex.classList.add('invalid')
}
select.addEventListener('change', update)
hex.addEventListener('input', update)
CanID.value = 400;
</script>