I'm a big fan of not writing code that someone else has already written for me, so I'm always looking out for new and interesting libraries to handle doing repetitive or mundane tasks.

Recently I was tasked with creating a web form for taking customer input - a pretty common task for most any engineer who has to deal with the web.  As this is a really common task, I thought what a wonderful opportunity to not write some code!

Validanguage

Validanguage is a nice little library which handles input validation in a few different ways - there is a tag based system which you can drop in, or you can create a javascript configuration for handling input.

Validating a Form

So, first we need to import our headers and define some kind of function to handle our error messages.

<script type="text/javascript" >
  var validanguageLibrary='jquery';
  function showError( errorMsg ) { $( "#"+this.id+"_error" ).html( "* "+errorMsg ); }
</script>
<script type="text/javascript" src="../../validanguage.js"></script>

Great, so now it throws an error message somewhere.  One of the nice things about validanguage is that you can reference the function caller using the 'this' keyword.

<li>
  <span class="inputlabel">Required Input</span>
  <input id="required_input" name="required_input" type="text" class="textinput">
  <span id="required_input_error" class="form_error"></span>
  <script type="text/javascript" >
    validanguage.el.required_input = { 
      onsubmit: true, required: true, 
      errorMsg: 'Required Field', onerror: 'showError' 
    };
  </script>
</li>

Starting with a simple validator, we can set up something that checks for required data existing on a form submit.  The class automatically registers against the 'required_input' form input, or one can be specified.  The onsubmit field automatically will intercept a form submit action, so at this point no more code needs to happen for this validator to function.

<li>
  <span class="inputlabel">Some Number</span>   
  <input id="some_number" name="some_number" type="text" class="textinput">
  <span id="some_number_error" class="form_error"></span>
  <script type="text/javascript" >
    validanguage.el.some_number = { 
      characters: { mode: 'allow', expression: 'numeric' },
      onsubmit: true, required: false, errorMsg: 'Must be a number', onerror: 'showError',
      onblur: true, expression: 'numeric', minlength: 5, maxlength: 5
    };
  </script>
</li>

A this one goes a little further, using an onblur to kick off validation when focus leaves the input box.

<li>
  <span class="inputlabel">Email Address</span>   
  <input id="email" name="email" type="text" class="textinput">
  <span id="email_error" class="form_error"></span>
  <script type="text/javascript" >
    validanguage.el.email = {
      validations: [ { name: 'validanguage.validateEmail', onsubmit: true, onblur: true } ],
      errorMsg: 'Invalid Email Address', onerror: 'showError'
      };
  </script>
</li>

There are also a variety of built in validation functions, which can be used in a similar fashion.

<li>
  <span class="inputlabel">Phone Number</span>   
  <input id="phone_number" name="phone_number" type="text" class="textinput">
  <span id="phone_number_error" class="form_error"></span>
  <script type="text/javascript" >
    validanguage.el.phone_number = {
      characters: { mode: 'allow', expression: 'numeric()- ' },
      regex: { onsubmit: true, onblur: true, expression: '\\(\\d{3,3}\\) \\d{3,3}-\\d{4,4}' },
      transformations: [ { onkeyup: true, name: "validanguage.format('(xxx) xxx-xxxx', '-() ', '.')" } ],
      errorMsg: 'Invalid number', onerror: 'showError'
      };
  </script>
</li>

The real power of validanguage is realized when you start to utilize a combination of the transformation action with the format action, in that you can rewrite input as it is being typed. This has a wide variety of uses, but here is an example of how it can work for a phone number.

Demo

Conclusions

There was only one issue that I discovered, which occurs on a long page load the validation does not trigger until the load is complete - an issue which is not tough to work around and sometimes the error message text will not automatically go away when using custom functions.

These examples are also just scraping the surface of some of the capabilities which are provided - as these were the only parts which I needed at the time.  Most of the other functionality is outlined on the project site.

One of the main issues that will frustrate most that are trying to use this library will be the lack of coherent documentation (besides examples) for the more complex logic going on within the library.  While the code itself is not hard to follow, sometimes using certain features can be frustrating.

With the above in mind, I'm very impressed with this library.  It's lightweight integration makes it a good candidate for validating simple forms.  For more advanced forms which have a lot of client side interaction, I would be less sure if it is an ideal solution due to the advanced features overriding the basic form submit workflow.