Let me have a blog

An easy way, XHTML standard, accesible and usable, library for form validations using JavaScript with the powerful libraries jQuery and YAV.

Background

Web forms are the standard way for to obtain input data of the users. As usual, you allways need to validate the input data before to accept them (store in the database, work with them, ...) , so the server-side validation is neccesary because errors in the input data can generate errors in the server code (clients without javascript, direct posts,...). You have different alternatives for server-side validation, using frameworks (CodeIgniter for PHP or Apache Wicket for JAVA are some examples of web forms validation routines) or programming all the code lines for to validate the input data from the user (more tedious).

But there are some thoughts about you prefer validate also the web form in the client side:

1. Is faster. You don't need send the form and wait the response from the server.
2. Major interactivity.
3. More usable interfaces.

In internet, there are some examples of different sort of javascript validation, programming directly each validation routine (Javascript form validation – doing it right, Form validation,...) or with a javascript library (JavaScript Form Validations Made Easy!, JavaScript Form Validation, the Aspect-Oriented Way). The libraries are preffered by the programmers because reduce the code that they write but normally these libraries are focused to the data validation but not in the later error representation, so the main validation function only returns true or false, or a list of fields with the errors and the programmer normally show the errors all together in an alert box or in a custom place in the web page (a div) or colour the error field. These methods of error representation can be improved focusing to accessibility and usability:

1. A normal alert box showing the errors is not usable and not accessible because, after to click in the OK button, the user have not visible what is the field with the error. You need mark with a accessible way the field.
2. Colour the field is well, because the user can see the problematic fields fastly (usable), but is not accesible (what about with visibility problems people). You need write near the field, preferably in the label of the field.
3. Move the focus to the first error. If you update the page content with JavaScript, and the user is in the bottom of the page, probably, the changes are not shown by the user. You need scroll the page and focus the first element with problems or error message.

There are two libraries (that I know) with more advanced options for web forms validation, jQuery Validation plugin and YAV. These libreries are very good but I have found some problems with them:

• You have to set a list of rules for each field to validate and the error messages in the JavaScript (Validation plugin and YAV). YAV is more tedious because the conditional rules require to set the proper indexes of the condition rule in the array of the rules. Also, you need then different JavaScript code for different language messages (english, spanish,...) although normally the language translations are in the templates.
• Awful class names like class="{required:true,email:true}" (Validation plugin).
• Custom validate attribute is not W3C standard (Validation plugin).
• The error results are not associated to each field (YAV). Then the programmer have not a easy way to write an error message near the field.
• Relationship rules. Only YAV has relationship rules like and, or or implies. Also you can set a rule of relation of other relation joint like (field1 and field2) or (field2 and field3).
• jQuery Validation has a perfect control over where the error messages are shown but it is not the same in YAV. YAV only show the errors as a list using a layer or an alert message. You can not set individual message related with the error field (YAV).

So I'd need some similar but only with the good things of these plugins and without the problematic things (no W3C attributes, ...). This was my target for the spare time in my holidays.

jQuery.YAV plugin makes easy the web forms validation

jQuery.yav is a new plugin for to integrate YAV form validation wih jQuery, making the form validation more easy, accessible, usable and W3C standard. Now you can validate forms with a more easy form, and if you like, you can get all the power of the custom and extended setting of this plugin, setting more complex validations. jQuery.YAV add also, a little bug repair for YAV library for multiple values in class attribute and not requires yav-config.js file. Tested in IE 6 and 7, Firefox 2, Netscape 7, Safari 4 for Windows, Konqueror 3.5 in Linux and Opera 9 but must work in jQuery compatible browsers.

Changelog

IMPORTANT: YAV 1.4.0 library introduced a bug working with multiple classes, you can download a patched version or wait for the future release :-)

Download

 jquery.yav.js (uncompresed version) or  jquery.yav.pack.js (compressed version, only 4kB) and the documentation

The plugin requires jQuery (MIT/GPL license) and YAV (GPL license) libraries.

Documentation

jQuery.YAV set all predefined rules of YAV as simple class names. So you can validate simply set the proper class name. If the rule fails then the title of the field is shown as error message. This is for accesibility improve, so screen readers can read the guidelines of the field. jQuery.YAV capture the "onsubmit" event and if the validation fails the form is not submitted.

Basic example (run the example)

  

    Username:
      
    
 Email:
 
 
 
  

 $(document).ready(function(){
  $("#form1").yav();
 });

Username field has two classes (required and alphanumeric) and the title attribute with the message, also in email field has required and email classes. This classes works as normal css classes but also as validation rules, so any form field with this rules will be validated.

The pre-defined validation classes are the same of YAV: "alnumhyphen", "alnumhyphenat", "alphabetic", "alphanumeric", "alphaspace", "date", "date_le", "date_lt", "double", "email", "empty", "equal", "integer", "keypress", "maxlength", "minlength", "notequal", "numeric", "numrange", "regexp" and "required".

If any rule requires some parameter you can set in the alt attribute with a especial syntax. Alt attribute in form fields in the standard XHTML is of type CDATA so, you can write any code and this is XHTML valid!.

Also if you use more rules, you can set params as array of params (you need set an empty array param for the rules that not requires params). The params is in alphabetic order of the rules:

Basic example with field event validation(run the example)

  

    Username:
             title="Please write only alphanumeric characters, this field is required." 
       alt="{event:'blur, change'" name="username">
    
 Email:
 
 
 
  

 $(document).ready(function(){
  $("#form1").yav();
 });

Alternatelly you can validate a form field on event trigger using the event parameter. This parameter is a event or a comma separated event list.

Custom rules example (run the example)

  

    Say hello world:
      
    
 
  

 $(document).ready(function(){
  $("#form1").yav({
   errorDiv:"mainError",
   errorMessage:"Some errors are found, please correct them",
   custom: {
    myCustomRule: function(return_value, param1, other_param){
     var field_id = return_value.id;
     if ($("#"+field_id).val() == param1){
      return null;
     }else{
      return return_value;
     }
    }
   }
  });
 });

You can set others new validation rules and use them as class names like pre-defined validation classes, the HTML code is the same, and if your custom rule has params, you can set the params with the same way of pre-defined rules. In the yav plugin call, you can set the config parameters as a map variable (pairs of key: value). A special param is "custom" and this is also a map variable with the custom rules definitions name_of_the_rule: function(...).

A custom rule allways has a first param (called in the example as return_value) with the id and the msg for to show the error. For a custom rule works, the rule must return null if the rule is passed or the first param on error. Alternately, you can use this param for to get the id of the associated field.

In this example, we can set a top message, indicating that there are found errors. This settings are configured with "errorDiv" and "errorMessage" param. If errorDiv is not found in the page, the message is not shown. The webpage scroll to the first error or the errorDiv in each case. This setting is for usability and more accessibility improve.

Advanced config options and setting yav configuration variables and AJAX(run the example)

  

    Say hello world:
      
    
 
  

 $(document).ready(function(){
  $("#form1").yav({
   errorDiv:"mainError",
   errorMessage:"Some errors are found, please correct them",
   errorClass:"verror",
   errorTag:"span",
   errorPosition:"parent().before",
   custom: {
    myCustomRule: function(return_value, param1, other_param){
     var field_id = return_value.id;
     if ($("#"+field_id).val() == param1){
      return null;
     }else{
      return return_value;
     }
    }
   },
   onOk: function(form){
    $.post(form.action,{
     text: $("#text").val()
    },function(server_response){
     alert("User says: "+ server_response);
    });
    
    return false;
   },
   onError: function(){
    alert("Please correct the errors");
    return false;
   }
  },{
   inputclasserror: "markererror",
   errorsdiv: "yaverror"
  });
 });

This example shows how set more advanced settings of the plugins. In the call of yav plugin, we have two map params, the first is the plugin config params, the second is used for to change the default YAV settings (see YAV documentation), the names of the configuration variables in the second  parameter are the same name as YAV original library.

In the first param, we have some control variables for jQuery.YAV plugin, errorDiv and errorMessage sets a top error and advice to the user. errorClass set the class of the errors when they are shown (by default the class is "error"), errorTag set the tag that enclose any error message (by default is a "p" tag, you can use "div, span, etc..."), errorPosition set the position related to each error field using the name conventions of jQuery (after, before, parent().before, parent("tr").next("tr").html, ....).

Two more config variables you can use, onOk and onError. This config variables are functions with one param (a reference of the validated form). If these functions returns false, the form submit is cancelled, if returns true or none the form is submitted. You can use this functions for to execute any code post-validation, by example, we can use onOk function for to submit the input data using AJAX, and cancelling the normal form submittion. You can use one, two or any of these functions.

Working with relationships between rules (run the example)

  

    Say hello world:
      
    
 Say goodbye world:
      
    
 
  

 $(document).ready(function(){
  $("#form1").yav({
   errorDiv:"mainError",
   errorMessage:"Some errors are found, please correct them",
   errorPosition:"parent().before",
   custom: {
    myCustomRule: function(return_value, param1, other_param){
     var field_id = return_value.id;
     if ($("#"+field_id).val() == param1){
      return null;
     }else{
      return return_value;
     }
    }
   }
  });
 });

This example shows a basic relation between two fields. This fields are related with a conditional and so, we will show another message if the two rules are passed. This relationship is set from the HTML code inside the alt attribute. In the alt attribute of the first field, we have a condition configuration, this condition has the next structure:

condition: { name: 'any_string_identifier', type:'and|or|implies', msg:'Error message to show'}

Alternately, you can set also, a id variable in the condition, with the id of the field that the error will be show, by default is the first field with the condition configuration. The next field only configure a condition using the name identifier, so, any field configured with the same condition identifier are conditioned to the same relationship.

In the previous example, the two rules are checked and generates an error although we remove the relationship, but if I don't want shows the individual errors but I want show the relationship error, I can set a requirement, in the alt attribute, we write the require setting with the valid values: pre-condition or post-condition (for implies relationships).

alt="{require:'pre-condition',condition: { name: 'any_string_identifier', type:'and|or|implies', msg:'Error message to show'}}"

Multiple condition and groups of relationship (run the example)

You can set relationships over other relationships. So we have 4 fields (A, B, C and D), we have related A and B, later we have related C and D, we also want a relationship over the first group and the second group with a or condition, by example, so we have: (A and B) or (C and D).

  

   
 Write a number:   Write a alphanumeric text:   

 
 Write a number:   Write a alphanumeric text:   

 
  

 $(document).ready(function(){
  $("#form1").yav({
   errorDiv:"mainError",
   errorMessage:"Some errors are found, please correct them",
   errorPosition:"parent().before",
   custom: {
    myCustomRule: function(return_value, param1, other_param){
     var field_id = return_value.id;
     if ($("#"+field_id).val() == param1){
      return null;
     }else{
      return return_value;
     }
    }
   },
   onOk: function(){
    alert("The validation is passed, please note that is the field is empty the rule is passed");
    return false;
   }
  });
 });

As you can see in the example in the first field, we have set two conditions in the alt attribute, so condition config also can be an array of relationships. In the second condition we have set a new configuration value group as array of relationship identifiers.

{name: 'identifier_of_relation_group', type: 'or', group:['one_identifier', 'other',....], msg: 'message to show on error'}

Also as you can see, a condition (relation) can have a require value, the same as a normal rule.

Labels: accessibility, javascript