código para mudança de bandeira do cartão ao digitar número

[bernardinoandre 2]

Pessoal,

Mais uma vez preciso de ajuda.

 

Preciso modificar um código na qual a bandeira do cartão seja selecionada automaticamente ao digitar o início da numeração do cartão por convenção internacional. Ou seja, os 6 primeiros dígitos do número do cartão de crédito identificam a bandeira do cartão.

 

Todo cartão começado por 4 é Visa; cartões Mastercard começam com 51, 52, 53, 54 ou 55; e cartões American Express começam com 34 e 37. Preciso fazer uma função que seja ativada a cada tecla digitada no campo do número do cartão (DICA: evento onKeyUp) e ainda, Se o primeiro dígito teclado for 4 então a bandeira Visa é selecionada (Fig. 11 esquerda). Se o primeiro dígito teclado não for 3, 4 ou 5, então uma mensagem de erro é emitida e o campo do número do cartão é apagado.

 

Alguém sabe me dizer que função é essa? Já rodei o google todo e não consegui achar algum esqueleto dessa função.

Eu tenho abaixo, o código do box do cartão de crédito.

<fieldset class="fsResDir"> <legend>Forma de Pagamento</legend> <br/>
			<label>
				<input type="radio" name="RadForma" checked /> Cartão
			</label>
			<label><input type="radio" name="RadForma" /> Cheque
			</label>
			<label><input type="radio" name="RadForma" /> Dinheiro
			</label> <br/> <br/> <br/>
		<fieldset id="dadoscartao"> <legend>Dados do Cartão</legend> <br/>
			<label>
				<input type="radio" name="RadBand" checked />
					<img src="imagens/visa.png" />
			</label>
			<label>
				<input type="radio" name="RadBand"/>
					<img src="imagens/master.png" />
			</label>
			<label>
				<input type="radio" name="RadBand" />
					<img src="imagens/amex.png" />
			</label> <br/> <br/>
			<label for="validade" class="labcol1">Validade:</label>
				<input type="text" class="val22" name="cartaomes" /> /
				<input type="text" class="val44" name="cartaoano" />
			<br/> <br/>
			<label for="numero" class="labcol1">Número: </label>
				<input type="text" class="val120esq" name="numerocartao" />
		</fieldset>
		</fieldset>

No link a seguir, segue exemplo quando digitamos um número correto do cartão e aí, a bandeira é automaticamente selecionada: https://flic.kr/p/zhX6fT

 

No link a seguir, segue exemplo quando digitamos um número incorreto do cartão e aí, é apresentado a mensagem de erro e os dados do cartão apagados: https://flic.kr/p/Acy6M5

 

Desde já, quem puder me auxiliar, muito obrigado!

[ricardoscarpim 0]

Ola amigo, tudo bem, espero que sim.

 

Voce pode utilizar Jquery para fazer isso.

 

Tipo, pegar o Conteudo digitado no campo e testar o length.

 

.on('blur', function (){

/* Verifica se Existe Algo Digitado. */
if($(this).val() !== ''){

if($(this).text().length > 6{

 

faca o controle aqui }

}

[bernardinoandre 2]

Ricardo,

Obrigado.

 

Vou verificar sua dica e posto aqui o feedback.

 

Valeu!

[ckcesar 7]

Olá!

 

No campo digitavel você pode deixar um onbluir="nome_function();" e mandar pelo ajax, com isso ele pega o valor via post e consulta rapidamente no banco de dados e retorna o que você quiser.

function nome_function(){

$.ajax({
   url:'arquivo.php',
   type:'POST',
   data: $('#id_form').serialize(),
   succes: function(data){
      $('#id_input').html(data);   --> aqui fiz pra trazer um resultado dentro de um input de exemplo;
  }
});

}

[bernardinoandre 2]

Obrigado, também, Cesar.

 

Mas analisei o exercício e ele pede em Javascript, mesmo.

Não posso usar esses outros recursos. Ou seja, é pra complicar mesmo (risos).

 

Continuo no 0 x 0 :(

 

Falta apenas essa questão para eu concluir tudo...

[bernardinoandre 2]

Galera,

Consegui o código.

 

Agradeço à todos o apoio. Fiz um trabalho em conjunto e um parceiro de classe conseguiu apoiar.

<script>
function SelecionaCartao(NumeroCartao) {

  var NumeroCartao = document.getElementById("numerocartao").value;
  Opcoes = document.forms["compras"].elements["Bandeira"];
  var regexVisa = /^4/;
  var regexMaster = /^5[1-5]{1}/;
  var regexAmex = /^3[47]{1}/;
  var invalidos = /^[0126789]|^5[06-9]{1}|^3[1235689]/;


  if(regexVisa.test(NumeroCartao)) {
Opcoes[0].checked = true;
return false;
}

 if(regexMaster.test(NumeroCartao)) {
Opcoes[1].checked = true;
return false;
}

 if(regexAmex.test(NumeroCartao)) {
Opcoes[2].checked = true;
return false;
}
 
 if(invalidos.test(NumeroCartao)){
alert('cartao inválido');
document.getElementById("numerocartao").value = "";
Opcoes[0].checked = true;
return false;
}
}
</script>

[talia 0]

queria saber como q vc chamou a função em html

[talia 0]

obrigadaa