Question

My Jquery code basically validates a textbox’s value on copy-paste
This code applies to many input fields in multiple pages. All the pages use a common JavaScript file and a common Layout page

var regex = /^[A-Za-z0-9AEIOUaeiou\.\-\~\`\'']*$/;
$('#InputField1').bind('input propertychange', function () {
    var value = $(this).val();
    if (!regex.test(value)) {
        $(this).val("");
    }
});

Instead of writing this on every page, is there any way to make this code more generic?? That is, could the following part of the code be written just once somewhere on the layout page or JavaScript page??

var value = $(this).val();
if (!regex.test(value)) {
    $(this).val("");
}

Answer 1

This is one of the awesome things about jQuery. You can do this in a global JavaScript file:

(function($){  
 $.fn.validatePropertyChange = function() {  

    return this.each(function() {
         var self = $(this);
         var regex = /^[A-Za-z0-9ĀĒĪŌŪāēīōū\.\-\~\`\'']*$/;
             $(self).bind('input propertychange', function () {
             var value = $(this).val();
             if (!regex.test(value)) {
                  $(this).val("");
             }
          });
    });  
 };  
})(jQuery);

Then just call:

$('#InputField1').validatePropertyChange();

And you can also chain the Ids, such as:

$('#InputField1, #InputField2').validatePropertyChange();

and use CSS selectors too

$('.required-field').validatePropertyChange();