[SuperZen]

казалось бы простая задача на словах )...

<style>
  .invalid {
    color: red
  }
</style>

Есть вот такой select
<select name="CanFrame_Type" id="CanFrame_Type">
  <option value="Std" data-min-max="0-7FF" data-len-min-max="1-3">Std</option>
  <option value="Ext" data-min-max="800-FFFFFFFF" data-len-min-max="3-8">Ext</option>
</select>
Далее поле для ввода НЕХ
<input id="Can_ID" name="Can_ID" class="max1" />

<script>
  function HEX(s, h) {
    const select = document.getElementById(s)
    const hex = document.getElementById(h)
    function update() {
      !(parseInt(hex.value, 16).toString(16) === hex.value.toLowerCase()) && !!hex.value && (hex.value = hex.oldValue || '')
      var [min, max] = select.options[select.options.selectedIndex].dataset.minMax.split('-')
      var [lmin, lmax] = select.options[select.options.selectedIndex].dataset.lenMinMax.split('-')
      !(hex.value.toString(16).length <= lmax) && (hex.value = hex.oldValue || '')
      parseInt(hex.value, 16) >= parseInt(min, 16) && parseInt(hex.value, 16) <= parseInt(max, 16) ?
        hex.classList.contains('invalid') && hex.classList.remove('invalid')
        :
        !hex.classList.contains('invalid') && hex.classList.add('invalid')
      hex.oldValue = hex.value
    }
    select.addEventListener('change', update)
    hex.addEventListener('input', update)
    update()
  }
  const controller = new HEX('CanFrame_Type', 'Can_ID')
</script>