Você pode usar a propriedade pattern
, que define o formato que o campo pode ter, usando uma expressão regular para tal:
/* deixa uma borda vermelha enquanto o campo estiver inválido */
input:invalid {
border: 1px solid red;
}
<form>
<input type="text" pattern="^\d+(,\d{1,2})?$" required>
</form>
Explicando a regex:
\d+
é "um ou mais dígitos".
Em seguida, temos um trecho entre parênteses: uma vírgula seguida de \d{1,2}
(um ou dois dígitos). E o ?
depois dos parênteses torna todo este trecho opcional.
Ou seja, podemos ter vários dígitos, ou vários dígitos seguido de vírgula, seguido de um ou dois dígitos.
Além disso, a regex tem os marcadores ^
e $
, que são respectivamente o início e fim da string. Assim, eu garanto que o campo só terá o que está especificado na regex.
O que o seu replace(/\D/g, '')
está fazendo é substituir todos os \D
(ou seja, qualquer caractere que não seja dígito) por ''
(a string vazia). Ou seja, você está removendo tudo que não é um dígito do valor do campo (se o valor for, por exemplo, abc123!@#,:.x
, o resultado do replace
será 123
- tudo que não é dígito é removido). Por isso ele não funciona para validar o formato do campo.