Uma alternativa às soluções apresentadas é bloquear somente o envio do formulário com os atributos de validação do HTML5, não a entrada do usuário.
Na verdade, não há como garantir que os dados inseridos estejam de acordo com o previsto, se o usuário quiser badernar ele o fará. Se estiver com o Javascript desabilitado no navegador e você possui uma validação por meio de script, ele passaria tranquilamente. Se ele quiser inspecionar o código-fonte da página e modificar algum atributo no HTML ou um função em um arquivo JS que tratam da validação, ele também passaria numa boa.
Por isso que no servidor devem existir outras checagens, esse assunto já gerou até uma pergunta sobre a eficiência da validação somente no client-side. A validação no client é somente uma tentativa de poupar recursos e evitar realizar requisições à toa para o servidor.
Voltando aos atributos de validação, uma das principais vantagens é eliminar a necessidade de usar Javascript para validar campos. Por outro lado, existe a boa má e velha história do suporte limitado em alguns navegadores, por isso a minha resposta pode não ser a melhor solução dependendo dos usuários que acessam (ou podem acessar) a sua página.
1ª solução: type='text'
com atributo pattern
Uma forma é definir o atributo pattern
do campo para aceitar somente números.
<input type='text' pattern='\d*'/>
2ª solução: Usar um campo do tipo number
Semanticamente, essa seria a melhor opção para criar um campo que aceita somente números, sem dúvidas. Porém, novamente vem a questão da compatibilidade e o suporte aos campos type='number'
é péssimo.
<input type='number'/>
Pode até usar o seletor :invalid
para informar o usuário que tipo de dados é esperado naquele campo:
p {
color: #ea6153;
display: none
}
input:invalid + p {
display: inline
}
<input type='text' pattern='\d*'/>
<p>Ei! Este campo só pode ter números.</p>
Concluindo
Validações com HTML é algo recente, isto explica o suporte limitado em alguns navegadores. Mas vejo com bons olhos as implementações desse recurso desde que entrou na especificação, só precisamos dar mais um tempo.
Da mesma forma que precisávamos usar Javascript antigamente para fazer animações, por mais simples que fossem — hoje fazemos isto de forma elegante somente com as CSS3 — logo estaremos usando somente HTML para limitar as entradas em um campo.
O Can I Use? é um ótimo site para acompanhar a compatibilidade de uma feature. Existem bibliotecas como a Modernizr que estão aí para detectar essas features e ajudar o desenvolvedor a fazer uso de polyfill ou do que já existe nativamente.