jQuery.YAV

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

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:

Is faster. You don't need send the form and wait the response from the server. Major interactivity. 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:

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. 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. 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.

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.

Some Ideas

Some ideas using jQuery.YAV plugin After of the plugin publication, I have had some request about how you alert the errors as "classic" YAV style or how you display all the errors inside a DIV.

In the first time, I question me, Why I want show all the errors inside a only layer?, focusing in accesibility it is better show the errors inside the label of the each field, but... Why not?. This is the idea:

I copy all the errors in the onError function, inside to a div, and remove the old.

	$(document).ready(function(){
		$("#form1").yav({
			onError: function(){
				$("#errorContainer").append($(".error"));
				$(".error").not($("#errorContainer .error")).remove();
				$("#errorContainer").show();
				
				return false;
			}
		});
		$("#errorContainer a.close").click(function(){
			$(".error").remove();
			$("#errorContainer").hide();
		})
	});

The second idea. Really I have deprecated "classic" YAV style (a simple alert) because this is not usable and with a minimal accesibility. But if you want.... you can get the messages in the old jsErrors variable of YAV, but the syntax of this errors have changed a bit in the plugin. An error message is an map object like {id:"the_related_id_field", msg:"the error message"} or the string representation of this object. So:

	$(document).ready(function(){
		$("#form1").yav({
			onError: function(){
				var errorList = "Please check the next errors: \n\n";
				for (var i=0; i					errorList += ((typeof jsErrors[i]=="object")?jsErrors[i].msg:(eval("("+jsErrors[i]+")").msg)) + "\n";
				}
				alert(errorList);
				
				return false;
			}
		});
	});