Centralized way/system for defining input mask

We currently use the following logic to mask the inputs:

Set a specific class to several inputs <input type="text" class="typenumdec" />

In document.ready() bind a propertychange event with the rules:

$('table tbody > tr > td.tiponumdec').children('input[type=text], input[type=number]')
        .add('input[type=text].tiponumdec, input[type=number].tiponumdec').bind('input propertychange', function () {
        $(this).val($(this).val().replace(/[^0-9,]/g, ''));
    });

But we wanted to centralize the logic and make it more streamlined for our developers so they dont have to add/modify the bindings.

Something like this:

Developer defines somewhere the format and its name (javascript globals? key/value array?):

var formatmoney1 ='5.2'; //5 integers and 2 decimals

var formatmoney2 ='5.3'; //5 integers and 3 decimals

var formatdays ='3'; //3 integers
Developer sets the format to a data-atribute or css class (recommended option?)

<input type="text" class="formatmoney1" data-formatx="formatmoney1" />
On document.ready() a generic function parses the format definitions and the inputs in order to mask them depending on its assigned format

PS: we saw this plugin that seems interesting in order to cover part of the mask logic (your opinions?): http://igorescobar.github.io/jQuery-Mask-Plugin/

Solution

We are currently using HTML 5 to make 99% of all validations. You can use them in a very understandable and developer-friendly way.

For example this code will prevent entering everything else then an email address:

<input type="email" />

Or use this with custom regex:

<input type="text" name="dutch_zip_code" pattern="[A-Za-z]{4}[0-9]{2}" />

You can also set the pattern in javascript / jquery like this:

<html>
<head>
  <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
  <script type="text/javascript" src="jquery.mask.js"></script>
</head>
<body>
<input type="text" name="dutch_zip_code" data-validation-type="dutch_zip_code" />

<script>
$(document).ready(function()
{
    $('input[type=text]').each( function()
                           {
                               var type = $(this).data('validation-type');

                               if (type == 'dutch_zip_code')
                               {
                                   $(this).attr('pattern', '[A-Za-z]{4}[0-9]{2}');
                                   //
                                   // Use jquery mask plugin:
                                   // https://plugins.jquery.com/mask/
                                   //
                                   $(this).mask('0000SS');
                               }
                           }
                         );
});
</script>
</body>
</html>

You can use modernizr for backwards compatibility.