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

desarrollo web profesional df

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