Archive for November, 2008

Determine Credit Card Type with Javascript

November 7th, 2008

I don’t understand why most online commerce sites ask the user to select what type of credit card they are going to enter instead of discerning the type programmatically and displaying feedback to the user. So here’s a small example I came up with on how to do just this.

Here’s a working example:

Here’s the HTML:

<html>
  <body>
    <form>
      <input id="ccNumber" onChange="SetTypeText(this.value)" />
      <br />
      <div id="cardType"></div>
    </form>
  </body>
</html>

Here’s the important part, the javascript:

<script type="text/javascript">
 
	function SetTypeText(number)
	{
		var typeField = document.getElementById("cardType");
		typeField.innerHTML = GetCardType(number);
	}
 
        function GetCardType(number)
        {            
            var re = new RegExp("^4");
            if (number.match(re) != null)
                return "Visa";
 
            re = new RegExp("^(34|37)");
            if (number.match(re) != null)
                return "American Express";
 
            re = new RegExp("^5[1-5]");
            if (number.match(re) != null)
                return "MasterCard";
 
            re = new RegExp("^6011");
            if (number.match(re) != null)
                return "Discover";
 
            return "";
        }
</script>

Credit Card Regular Expression

November 7th, 2008

So for the project I’m currently working on I need to verify credit card numbers input by the user. So I found a regular expression online that would do almost all of it, but it lacked a few necessary validations such as Discover cards and 13-digit Visas. So I modified it to work with almost all forms of Visa, MasterCard, American Express, and Discover cards.

It also supports white space and dashes in between blocks of numbers, as would be found on an actual credit card.

Here it is:
^(((4\d{3})|(5[1-5]\d{2})|(6011))[-\s]?\d{4}[-\s]?\d{4}[-\s]?\d{4})|(3[4,7][\d\s-]{13})|(4[\d\s-]{12})$

It’s not 100% perfect for catching invalid Discover or 13-digit Visa cards but it will recognize valid ones. For best results, strip out any non-digits from the input string before running it through the regular expression.

Cheers!

C#, Functions Creating Functions, with Lambda!

November 6th, 2008

So as my knowledge pertaining to the programming language C# progresses by contributions from the people around me as well as the infinite amount of resources online, I find it more and more fascinating and powerful. It’s sort of the “do-all” language, yet it still does it all in style.

Take this little concept for example. With the use of lambda expressions much like you’d find in any other functional programming language such as F#, F#’s predecessor ML, or Haskell, you can produce some pretty slick functional code right inline with everything else. This also produces an effect that is similiar (if not exactly) known as currying.

The following code uses a set of lambda expressions to create a nested function who takes an int and returns a function that matches the event signature for a Button.Click event. This allows us to dynamicly create a new function for each Button added to the form.

void AddButtons()
{
    // Create a brand new function that takes
    // an int and returns another function that
    // matches the definition of an EventHandler.
    Func<int, EventHandler> func =
        (x) => (sender, args) =>
            MessageBox.Show(x.ToString());
 
    // Add a list of buttons to our control/form
    // giving each a unique Click event.
    for (int i = 0; i < 10; i++)
    {
        Button btn = new Button();
        btn.Click += func(i);    // Add handler
        this.Controls.Add(btn);  // Add the button
    }
}

I know this isn’t the most useful example or most impressive, but it’s still pretty cool and serves as a nice reference. For some more slick examples of code optimization in C# you should check out some of the posts on my buddy Erin’s blog over at Random Bits of Foo.