jQuery Character Restriction Plugin

There are many ways to handle client side validation of form input, and I’ve come up with my own solution. Part of my solution includes a character restriction plugin I created using jQuery. The plugin checks specified text input and textarea elements as someone types in them, and removes characters that are not allowed.

The plugin also removes unwanted characters when pasted via keyboard shortcut, and disables right clicking on the elements so pasting by context menu is disabled. Specifying what characters you want to allow is easy, and for my own usage, I simply set up some character limiters that I use frequently, and include them as an external script.

Plugin Usage:

The comment form on this page is using my character restriction plugin, and I’ve set up the same restriction for each of the three fields by applying a CSS class of “max_chars”.

<!-- in document head -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script src="http://your-domain.com/js/jquery.restrictChars-4.0.0.js"></script>

<!-- in document body -->
<input type="text" name="author" class="max_chars" value="" />

Javascript added externally or before the closing body tag:

$(document).ready(function(){

  // The maximum allowed characters for any field with the max_chars class
  $(document).restrictChars(    
	'.max_chars', 
    {
      allow:" !@#$%^*+-=?_~.,:;/'\\"()\\s"
    }
  );

});

Remember, client side validation is no substitute for server side validation. This jQuery plugin cannot keep a malicious user from turning off javascript and submitting the form with unwanted characters.

Download v4.0.0 and let me know what you think: Download v4.0.0