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

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 (4)

  • Chauvel Responder

    fantastic publish, very informative. I'm wondering why the opposite specialists of this sector don't understand this. You should continue your writing. I am sure, you have a great readers' base already!

    Friday, June 2, 2017 9:53 AM
  • Pike Responder

    Nice weblog right here! Also your website quite a bit up fast! What web host are you the use of? Can I get your affiliate hyperlink to your host? I wish my web site loaded up as quickly as yours lol

    Friday, June 2, 2017 11:10 AM
  • Maples Responder

    I see you don't monetize your site, don't waste your traffic, you can earn extra bucks every month because you've got high quality content. If you want to know what is the best adsense alternative, type in google: Mertiso's tips

    Thursday, July 27, 2017 5:14 PM
  • Flanigan Responder

    Hello blogger, i must say you have hi quality content here. Your website can go viral. You need initial traffic only. How to get it? Search for; Mertiso's tips go viral

    Friday, July 28, 2017 12:11 PM

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