Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Olá!
Estou tentando montar um campo para validação de cartão de crédito e sua bandeira; acabei encontrando o seguinte código: http://jsfiddle.net/q0x3ksv3/
Funciona perfeitamente nessa URL, porém quando tento incluí-lo no meu site, não funciona, tem algo faltando? Segue meu código para entenderem melhor:
<script>
var cartoes = {
visa: /^4[0-9]{12}(?:[0-9]{3})/,
mast: /^5[1-5][0-9]{14}/,
amex: /^3[47][0-9]{13}/,
invalidos: /^[0126789]|^5[06-9]{1}|^3[1235689]/
};
document.getElementById('num').addEventListener('keyup', testarCC);
var inputs = document.querySelectorAll('.fsResDir input[type="radio"]');
function testarCC(e) {
var nr = this.value;
var tipo;
for (var cartao in cartoes) if (nr.match(cartoes[cartao])) tipo = cartao;
if (tipo) document.getElementById(tipo).click();
else for (var i = 0; i < inputs.length; i++) inputs[i].checked = false;
}
</script>
<fieldset class="fsResDir">
<legend>Dados do Cartão </legend>
<input type="radio" name="RadBand" id="visa" />
<label for="visa">
<img src="visa.png" />
</label>
<input type="radio" name="RadBand" id="mast" />
<label for="mast">
<img src="master.png" />
</label>
<input type="radio" name="RadBand" id="amex" />
<label for="amex">
<img src="amex.png" />
</label>
<label for="val" class="lab90">Validade:</label>
<input type="text" class="ent20Form" id="val" name="TxtValMes" />/
<input type="text" class="ent40Form" name="TxtValAno" />
<label for="num" class="lab90">Numero:</label>
<input type=text class="ent120Form" id="num" name="TxtNumero" />
</div>
</fieldset>
Obrigado!>
4 minutos atrás, Michel Wilhelm disse:
Dá uma olhada nesta biblioteca https://github.com/stripe/jquery.payment
Ela valida e também retorna qual o cartão baseado na numeração informada
Ele validou certinho, mas o que preciso é como o exemplo do post, que a bandeira do cartão seja informada automaticamente na tela após o preenchimento, e nessa biblioteca preciso dar uma ação pra isso :/
>
12 minutos atrás, ukow disse:
Ele validou certinho, mas o que preciso é como o exemplo do post, que a bandeira do cartão seja informada automaticamente na tela após o preenchimento, e nessa biblioteca preciso dar uma ação pra isso :/
var cartoes = {
visa: /^4[0-9]{12}(?:[0-9]{3})/,
mast: /^5[1-5][0-9]{2}/,
amex: /^3[47][0-9]{2}/
};
function testarCC(e) {
var inputs = document.querySelectorAll('.fsResDir input[type="radio"]');
var nr = this.value;
var tipo;
console.log(nr);
for (var cartao in cartoes) {
if (nr.match(cartoes[cartao])) {
tipo = cartao;
}
}
if (tipo) {
document.getElementById(tipo).checked=true
}
else {
for (var i = 0; i < inputs.length; i++) {
inputs[i].checked = false;
}
};
}
document.getElementById('num').addEventListener('keyup', testarCC);
Veja se é mais ou menos isso. Eu testei digitando "5162" que é o inicio de muitos masterscard, ai selecionou automaticamente o radio>
5 minutos atrás, Michel Wilhelm disse:
var cartoes = {
visa: /^4[0-9]{12}(?:[0-9]{3})/,
mast: /^5[1-5][0-9]{2}/,
amex: /^3[47][0-9]{2}/
};
function testarCC(e) {
var inputs = document.querySelectorAll('.fsResDir input[type="radio"]');
var nr = this.value;
var tipo;
console.log(nr);
for (var cartao in cartoes) {
if (nr.match(cartoes[cartao])) {
tipo = cartao;
}
}
if (tipo) {
document.getElementById(tipo).checked=true
}
else {
for (var i = 0; i < inputs.length; i++) {
inputs[i].checked = false;
}
};
}
document.getElementById('num').addEventListener('keyup', testarCC);
Veja se é mais ou menos isso. Eu testei digitando "5162" que é o inicio de muitos masterscard, ai selecionou automaticamente o radio
Estou testando nesse domínio alternativo: [http://divinho2.web2420.uni5.net/pag.asp](http://divinho2.web2420.uni5.net/pag.asp)
O código da tela ficou esse abaixo, mas continua sem dar retorno algum.
O que é estranho, o código no jsfiddle está funcionando tranquilo, precisa de algum plugin ou algo do tipo?
Obrigado!
<script type="text/javascript">
var cartoes = {
visa: /^4[0-9]{12}(?:[0-9]{3})/,
mast: /^5[1-5][0-9]{2}/,
amex: /^3[47][0-9]{2}/
};
function testarCC(e) {
var inputs = document.querySelectorAll('.fsResDir input[type="radio"]');
var nr = this.value;
var tipo;
console.log(nr);
for (var cartao in cartoes) {
if (nr.match(cartoes[cartao])) {
tipo = cartao;
}
}
if (tipo) {
document.getElementById(tipo).checked=true
}
else {
for (var i = 0; i < inputs.length; i++) {
inputs[i].checked = false;
}
};
}
document.getElementById('num').addEventListener('keyup', testarCC);
</script>
<fieldset class="fsResDir">
<legend>Dados do Cartão </legend>
<input type="radio" name="RadBand" id="visa" />
<label for="visa">
<img src="visa.png" />
</label>
<input type="radio" name="RadBand" id="mast" />
<label for="mast">
<img src="master.png" />
</label>
<input type="radio" name="RadBand" id="amex" />
<label for="amex">
<img src="amex.png" />
</label>
<label for="val" class="lab90">Validade:</label>
<input type="text" class="ent20Form" id="val" name="TxtValMes" />/
<input type="text" class="ent40Form" name="TxtValAno" />
<label for="num" class="lab90">Numero:</label>
<input type=text class="ent120Form" id="num" name="TxtNumero" />
</div>
</fieldset>Joga o script abaixo do HTML. Pode ser bobo, mas abre o console javascript do browser para ver se emite algum erro, mas acredito que já viu isso
Realmente era isso hahaha
Obrigado Michel! Deu certo :D
Dá uma olhada nesta biblioteca https://github.com/stripe/jquery.payment
Ela valida e também retorna qual o cartão baseado na numeração informada