Masks

by Mobeen Sarwar

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery.maskedinput/1.3.1/jquery.maskedinput.min.js"></script>
<label for="txtTime">Time:</label>
<input type="text" id="txtTime" />
<br />
<br />
<label for="txtZip">Zip Code:</label>
<input type="text" id="txtZip" />

CSS

label {
    font-weight:bold;
    display:block;
}

JavaScript

//Time Script
$(document).ready(function () {
   // any other code

   (function () {
      function dataIntegrity(obj) {
         var val = obj.val();
         var hrs = val.substr(0, 2);
         var mins = val.substr(3, 2);
         var period = obj.val().substr(5, 2);
         if(val == "") {
           return;
         }
         if (hrs == "00") {
            obj.val("");
            return;
         }
         if (parseInt(hrs, 10) > 12) {
            obj.val("");
            return;
         }
         if (parseInt(mins, 10) > 59) {
            obj.val("");
            return;
         }
         if (period == "") {
            obj.val(val + "AM");
         } else if (period.length == 1) {
            if (period.toUpperCase() == "A") {
               obj.val(hrs + ":" + mins + "AM");
            } else {
               obj.val(hrs + ":" + mins + "PM");
            }
         } else {
            obj.val(hrs + ":" + mins + period.toUpperCase());
         }
      }
      $.mask.definitions["p"] = "[01]";
      $.mask.definitions["y"] = "[apAP]";
      $.mask.definitions["z"] = "[mM]";
      $("#txtTime").mask("p9:99?yz", {
         completed: function () {
            dataIntegrity($(this));
         }
      })
      .blur(function () {
         dataIntegrity($(this));
      });
   })();
});

//Zip Code Script
$(document).ready(function(){
   // any other code

   (function () {
      $("#txtZip").mask("99999?-9999")
      .blur(function () {
         var lastFour = $(this).val().substr(6, 4);
         if (lastFour != "") {
            if (lastFour.length != 4) {
               $(this).val("");
            }
         }
      });
   })();
});