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

Estrada Web Group
Administrador
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

Compartir artículo:

Más artículos geniales

Manténgase actualizado

Obtenga excelente contenido en su bandeja de entrada todas las semanas.
Solo contenido excelente, no compartimos su correo electrónico con terceros.
Subir al inicio de la pantalla ;