0

Estou com um problema de validação em um campo de texto. Preciso que o campo não permita caracteres ALPHANUMÉRICOS, esta validação tem que ser feita obrigatoriamente com jquery.

1
  • 1
    Pode dar mais detalhes? Pode colocar algo que você tentou fazer?
    – Maniero
    17/10/2014 às 23:51

1 Resposta 1

1

Você não deu muitas informações sobre o jQuery Validate, apesar de ter marcado explicitamente o tópico com essa tag. Mas também você não nos forneceu nenhuma base para trabalho.

Então eu tenho de considerar as duas possibilidades.

Sem jQuery Validate

<input id="field" name="field" />
<button type="button" id="button">OK</button>

$( document ).ready( function() {

    $( '#button' ).click( function( e ) {

        e.preventDefault();

        if( new RegExp( "[a-zA-z0-9]+" ).test( $( '#field' ).val() ) === false ) {
            alert( 'Somente caracteres alfa-numéricos' );
        }
    });
});

Demo

Com jQuery Validate:

<form id="form">
    <input id="field" name="field" />
    <button type="button" id="button">OK</button>
</form>

$( document ).ready( function() {

    $( '#form' ).validate({

        rules: {
            field: { pattern: /[a-zA-Z0-9]+/ }
        }
    });
});

Demo

Atente apenas para o detalhe de um arquivo adicional sendo incluído no segundo Fiddle. Eu não uso a jQuery Validate então não sei se esta versão que eu usei é a mais atualizado ou não.

Veja que a técnica Expressão Regular a mesma para ambos os casos, muda apenas a implementação.

6
  • testei as duas implementações e não funcionou. @bruno-augusto
    – ivanp
    17/10/2014 às 2:23
  • Como você testou? No primeiro Fiddle, digitando qualquer coisa alfanumérica e clicando no botão não acontece nada. Colocando algum símbolo, faz aparecer um alert(). No segundo Fiddle, digitando qualquer coisa não alfanumérica, com um simples TAB faz aparecer Invalid format entre a caixa de texto e o botão. 17/10/2014 às 10:55
  • eu resolvi o meu problema com uma aplicação simples em html5 defini a regra da expressão regular com pattern="[a-zA-Z0-9 .]{3,30}". Mas mesmo assim obrigado!
    – ivanp
    17/10/2014 às 21:19
  • 1
    @IvanFloripa, sua 'solução' vai de encontro com o que você deseja: obrigatoriamente com jquery. A resposta do Bruno resolve seu problema, usando jquery, como você descreveu. 18/10/2014 às 0:44
  • eu procurei outra solução pois eu testei na minha aplicação e não funcionou @papa-charlie
    – ivanp
    18/10/2014 às 0:50

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .