Validar input de texto html conforme typescript

Qual é a melhor maneira de validar uma input de texto HTML à medida que ela é digitada? Todas as maneiras que conheço têm algumas desvantagens:

  1. Usando $.keypress você só tem access ao valor antigo da input, não ao novo. Além disso, alguns events (como cortar / colar usando o mouse) não serão detectados.

  2. Usar $.change só funciona quando a input perde o foco.

  3. Esta questão propõe uma solução, em que você usa a pesquisa para observar as alterações de propriedade. Em princípio, é possível validar o novo valor no retorno de chamada e depois reverter para o antigo, se inválido. No entanto, além de exigir pesquisas, não tenho certeza se está livre de condições de corrida.

  4. Este artigo sugere o uso de resources específicos do navegador quando presentes, voltando a pesquisar se nenhum estiver disponível. Parece a melhor abordagem até agora.

  5. [Update] como apontado nas respostas, $.keyup dá access ao valor após a atualização. No entanto, não só não funciona para o corte / colagem do mouse, mas também falha se você pressionar e segurar uma tecla, liberando apenas depois de muito ter sido typescript. Ou, se combinar keydown e keyup para salvar / restaurar o valor antigo, ele será interrompido se o usuário digitar muito rápido.

Nenhuma das soluções acima é livre de erros ou navegadores cruzados realmente seguros. Existem soluções melhores por aí, prontas para uso ou em produção? Parece ser um problema comum, eu tentei responder a perguntas semelhantes recentemente, sem sucesso, e estou interessado em uma resposta também.

(Um bom argumento contra essa prática também é bem-vindo, caso haja novos problemas que surgiriam se essa validação fosse implementada; no entanto, isso parece algo comum em outros idiomas, então duvido que seja algo ruim de se desejar)

Você pode usar os events de input (FF) e de mudança de propertychange (todos os outros) para capturar todas as formas de input, incluindo pasta de corte de teclado e RMB.

http://jsfiddle.net/dFBzW/

 $('input').bind('input propertychange', function() { $('#output').html($(this).val()); }); 

No mundo do jQuery, é comum aproveitar plug-ins para essas tarefas de validação. Os plug-ins podem ser relativamente fáceis de usar, e sua popularidade geralmente se reflete em menos bugs do que o código escrito do zero.

A validação de input geralmente é dividida em categorias, incluindo:

1) Formato de input correto / máscara de input. por exemplo, apenas AZ, ou digamos, números de 10 dígitos.

2) Existência de conteúdo em um domínio. Por exemplo, código de aeroporto ou códigos postais.

Para (1) você pode usar esses plug-ins relativamente populares:

Plugin de Entrada Mascarada do Bush Digital para Jquery . Tem muitas opções para personalização, incluindo espaços, por exemplo:

do site da Digital Bush:

 $("#phone").mask("(999) 999-9999"); 

O autoNumeric de decorplanit.com . Eles têm um bom suporte para números, bem como moedas, arredondamentos, etc.

adaptado do site da AutoNumeric:

 $('#amountPaid').autoNumeric({aSep: '.', aDec: ','}); // eg, 9.000,00 

Para (2) , você pode usar, por exemplo, o preenchimento automático da jQuery UI , combinado com dados de resources do servidor, em um formato como JSON. É provável que eles exijam um código personalizado para bloquear a input, mas você ainda pode aproveitar os plug-ins para a funcionalidade básica e se concentrar na lógica de negócios específica que está criando.

Algum texto acima adaptado de duas respostas em outros posts aqui e aqui .

Um bom argumento contra essa prática também é bem-vindo, caso surjam novos problemas que aumentariam se essa validação fosse implementada; no entanto, isso parece algo comum em outros idiomas, então duvido que seja algo ruim.

Se por “validar” você quer dizer “impedir que caracteres inválidos sejam inseridos”, acho que esta é uma prática ruim. É confuso para os usuários, que podem não estar prestando muita atenção e que talvez nem estejam olhando para o campo enquanto digitam (por exemplo, se estão inserindo números de conta ou de telefone que estão lendo em um pedaço de papel). O valor que realmente é salvo / usado pode ser um pouco diferente do valor que eles pensaram ter inserido.

Se por “validar” você quer dizer “testar o valor atual e chamar a atenção do usuário para qualquer problema”, por exemplo, exibindo um erro ao lado do campo ou alterando a cor de fundo, não há problema em usar uma combinação de vários events, incluindo keyup , mude, desfoque, cole, clique:

 $("field selector").on("keyup change blur paste cut click", function() { ... }); 

Isto irá capturar a maioria dos casos normais, como o usuário digita, e para os casos de clipboard ou drag’n’drop você pelo menos sabe que na pior das hipóteses o campo ainda será validado quando o usuário sair dele. (Obviamente, você não permite enviar até que todos os erros tenham sido corrigidos.)

Se você processar keyup e keydown que cubra os casos em que o usuário manteve a chave pressionada, porque a maioria dos navegadores enviará events keydown repetidos para isso.

Aqui está o código

 function validatephone(xxxxx) { var maintainplus = ''; var numval = xxxxx.value if ( numval.charAt(0)=='+' ) { var maintainplus = ''; } curphonevar = numval.replace(/[\\A-Za-z!"£$%^&\-\)\(*+_={};:'@#~,.Š\/<>\" "\?|`¬\]\[]/g,''); xxxxx.value = maintainplus + curphonevar; var maintainplus = ''; xxxxx.focus; } 
  

Apenas por outra solução para evitar certos caracteres, sem o JQuery …

  ... function checkInput(e) { //only alpha-numeric characters var ok = /[A-Za-z0-9]/.test(String.fromCharCode(e.charCode)); if (!ok) e.preventDefault(); } 

Não sei se isso requer novas versões das coisas ou apenas funciona em alguns navegadores. Por favor comente.

Você já tentou oninput ?

Exemplo de HTML:

  

javascript:

 function readvalue() { var name = $('#user_name').val(); } 

Isso também pode ser útil

 $(".cssclass").live("input propertychange", function () { //Validate goes here }); 
 let that=this; $(this.element).find("input").keypress(function(e) { let character = String.fromCharCode(e.keyCode); let newValue = this.value.substring(0,this.selectionStart) + character + this.value.substring(this.selectionEnd, String(this.value).length); if (!that.isFormatValid(newValue, that.getdecimalPoints())) { e.preventDefault(); e.stopPropagation(); return false; } return true; }); $(this.element).find("input").bind({ paste: function() { let _this = this; setTimeout( function() { let decimals = that.getdecimalPoints(); if (!that.isFormatValid($(_this).val(), decimals)) { $(_this).val(''); } }, 0); } });