Cómo validar tarjeta de crédito o débito en asp.net con JavaScript y jQuery4219

Cómo validar tarjeta de crédito o débito en asp.net con JavaScript y jQuery

En este ejemplo veremos cómo validar mediante JavaScript en un formulario la captura de una tarjeta de crédito o débito.

Tenemos que diseñar 4 cuadros de texto donde se capturaran los detalles de la tarjeta de débito o crédito, el cual es de 16 dígitos siempre. La funcionalidad que queremos dar es que cuando se introduce el valor 4º en cada cuadro de texto, el foco de la caja de texto se mueve automáticamente a la siguiente, para que nadie pueda entrar más de 4 dígitos y tampoco meno en un cuadro de texto.

Este es un problema muy común y se puede solucionar fácilmente usando JavaScript

1. Primero creamos un WebForm

2. Agregamos el código siguiente

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Validar Tarjeta de Credito usando JavaScript</title>
    <link href="Content/bootstrap.min.css" rel="stylesheet" />
    <script type="text/javascript">
        function moveFocus(from, to) {
            var length = from.value.length;
            var maxLength = from.getAttribute("maxLength");
            if (length == maxLength) {
                document.getElementById(to).focus();
            }
        };
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <fieldset class="form" id="fieldValidar">
            <div id="creditCardDetailsTextboxes" class="jumbotron">
                Captura el número de tu tarjeta:  
            <asp:TextBox ID="TextBox1" runat="server" MaxLength="4" Width="50px"  CssClass="required digits" onkeyup="moveFocus(this,'TextBox2')"></asp:TextBox>
                <asp:TextBox ID="TextBox2" runat="server" MaxLength="4" Width="50px" CssClass="required digits" onkeyup="moveFocus(this,'TextBox3')"></asp:TextBox>
                <asp:TextBox ID="TextBox3" runat="server" MaxLength="4" Width="50px" CssClass="required digits" onkeyup="moveFocus(this,'TextBox4')"></asp:TextBox>
                <asp:TextBox ID="TextBox4" runat="server" MaxLength="4" Width="50px" CssClass="required digits"></asp:TextBox>
            </div>
            <asp:Button runat="server" ID="btnGuardar" Text="Enviar formulario" CssClass="button green  submit fieldValidar" Width="150px" />
        </fieldset>
    </form>
    <script src="Scripts/jquery-1.9.1.min.js"></script>
    <script src="Scripts/jquery.validate.min.js"></script>
    <script src="Scripts/jquery.validation.net.webforms.min.js"></script>
     <script type="text/javascript">
            $(function () {
                $("#form1").validateWebForm();
            });
         </script>
    <style>
        .error{
            border:1px #ff0000 solid;
        }
        label.error {
            display:none !important;
        }
    </style>
</body>
</html>

El resultado es el siguiente:

aprende a programas asp.net

Compartir

Comentarios (1)

  • HENRIETT FERNANDO Responder

    Hola, Esto es para informar al público en general que la señora HENRIETTA FERNANDO, una Prestamista de préstamos privados ha abierto una oportunidad financiera para todos en la necesidad de cualquier ayuda financiera. Necesitas un préstamo ? ¿Necesita un préstamo para cancelar sus deudas o financiar su proyecto? ¿Ha sido rechazado por los bancos y otras agencias financieras? No busque más, porque estamos aquí para todos sus problemas financieros. Ofrecemos préstamos rápidos y confiables a un tipo de interés del 2% a personas, empresas y sociedades independientemente de la nacionalidad del cliente. Nuestros términos y condiciones y claro y muy comprensible. No se requiere chequeo de crédito, 100% garantizado. Envíenos un correo electrónico a: (henriettafernandoloanfirm@gmail.com)

    Friday, March 24, 2017 12:46 AM

Animate deja un comentario!!!

Eres un humano?

Últimos Tweets

Contáctanos

  • Dirección: Plutarco Elias Calles 243, Granjas México, Iztacalco, DF.

  • Teléfono:55-2712-3820 o 55-4164-9484

  • Email: info@developerji.com