Question

Let us examine a simple scenario, where the user is requested to input a Canadian postal code. The following postal codes are all valid and equivalent:

• H0H 0H0
• h0h 0h0
• h0h0h0

I would like the user to input any of them, but once the field is left to normalize the value to the first form. My postalCode validation method indeed allows to enter any of them, however, I wonder what is the right way to normalize the value.

Maybe there is already such a facility in the jQuery validation plugin, I just do not see it.

EDIT

Given a function normalizeInput I wonder how do I plug it in. Maybe there is a hook in the jQuery validation plugin specifically for that. If not, how to do it so that it is called after the field is left upon successful validation.

Answer 1

Try the following:

function normalizePostalCode(s) {
  return s.replace(/(.{3}) ?(.{3})/, '$1 $2').toUpperCase();   
}

var s = "h0h0h0";
s = normalizePostalCode(s); // H0H 0H0

It will remove whitespace (\s), and convert each letter to uppercase, yielding the first form untouched, and converting the second and third form to the first.

EDIT: I don’t think jQuery Validation Plugin provides some sort of normalization callback. You could, however, use the .blur() or .focusout() event and check if the field is valid(), and if it is, normalize it:

$("#txtPostalCode").blur(function () {
    $this = $(this);
    $this.validate();
    if ($this.valid()) {
      $this.val(normalizePostalCode($this.val()));   
    }
});

DEMO.