у меня в коде не смотрю на паттерн и размер
<input id="CanID" name="CanID" class="max1" size="5" pattern="[A-F\d]"/>
и стили тоже не так назначаются, если инпут не в размере, то обрезается под выбранный размер с правой стороны на максимальную длину, и если строка не входит в пределы, то интупу назначается класс invalid, а в твоем примере значение назначается через псевдо класс :invalid, надо тогда сделать
<input id="CanID" name="CanID" class="max1"/>
и
<style>
.max1.invalid {
font-weight: Bold;
margin-top: 5px;
margin-bottom: 5px;
color: red
}
.max1 {
font-weight: Bold;
margin-top: 5px;
margin-bottom: 5px;
color: black;
}
</style>