2

Estou criando uma pequena lojinha que venderá camisas de um evento e a venda das camisas serão limitadas a no máximo 4 camisas por pessoa, então preciso que no campo em que é definido o numero de camisas que a pessoa deseja comprar seja limitado a 4.

Com o input type number eu consigo setar este valor mas se a pessoa digitar o valor ao invés de utilizar o controle criado pelo campo ela consegue facilmente adicionar um valor maior.

Como faço para fazer com que o campo só aceite os valores 1, 2, 3 ou 4 lembrando que o valor mínimo é 1 e o máximo é 4

2 Respostas 2

6

Não é preciso Javascript:

<form action='#'>
  <input type='number' value='20' min='1' max='4'/>
  <button type='submit'>Enviar</button>
</form>

2
  • Eu testei isso mas nao funciona como expliquei, experimente colocar o valor a mão sem utilizar as setas do campo, você facilmente consegue coloca um valor fora do especificado (9 por exemplo)
    – Dark Media
    Commented 18/04/2015 às 16:29
  • 1
    @DarkMedia Mas o formulário não é enviado caso o input seja inválido. Pode testar aqui colocando um valor acima de 4 e tentando enviar. Commented 18/04/2015 às 16:36
3

Tente realizar o bind do evento onchange a uma função javascript que irá verificar a mudança do campo input e sempre que o mesmo for alterado faça a verificação do valor do campo input, algo deste tipo:

$("#caixa_texto").bind('input propertychange', function(){
    if($(this).val() > 4){
         $(this).val() = 4;
    }else if($(this).val() < 1){
         $(this).val() = 1;
    }
});

Você deve fazer log-in para responder a esta pergunta.

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