Atributo Pattern não indica erro e permite entrada de valores não definidos na expressão regular

Front-end
#1

Olá, sou iniciante e estou tentando usar o atributo pattern para impedir valores diferente do esperado e indicar erro ao usuário, entretendo não está funcionando no firefox, chrome, edge e opera. trecho do código:

        <form name="teste">		
            <input type="text" name="cpf" maxlength="14" required pattern="\d{3}\.?\d{3}\.?\d{3}-?\d{2}" placeholder="000.000.000-00">
            <input type="submit" value="Enviar">
        </form>
        <form name="teste2">
            <input type="text" name="cep" maxlength="9" required pattern="[0-9]{5}-[0-9]{3}" placeholder="00000-000">
            <input type="submit" value="Enviar">
        </form>

O que estou fazendo de errado?

#2

Testei aqui e apareceu uma validação:

image

Posta o html completo pra gente ver.

#3

Aqui você colocou o ponto e o traço como opcionais, ou seja, ele vai aceitar tanto 999.999.999-99 quanto 99999999999 (ou até mesmo 999999.999-99, 999.999999999, 999999999-99, etc, já que cada ponto e traço são opcionais).

Se o seu problema é esse (pois você só disse que “não funciona”, sem dizer exatamente o que aconteceu e o que era pra acontecer), basta retirar os ?, assim: pattern="\d{3}\.\d{3}\.\d{3}-\d{2}". Desta forma, ele só vai aceitar se tiver os pontos e o traço.

Dito isso, não é lá uma boa fazer com que o usuário digite os pontos e o traço. O que poderia ser feito é uma máscara, por exemplo (o usuário digita somente números e você formata). Mas aí já é outra história…