Handling forms in the browser

With the increased use of Ajax, form handling has evolved. Even if user needs are the same, the developer has new constraints faced repeatedly. There is obviously a need for a JavaScript library solving the following points:

• filling a form with data. Now that data is dynamically loaded with Ajax, the HTML form is empty and data, often provided as a complex object, has to be transferred, types converted, etc.
• field validation is not a new problem, but calling a server-side validation function on each user action is not a fast enough solution. Calling it when the field loses focus is too late as it forces the user to get back.
• extracting data on user submit, converting them again to a complex object to be sent by Ajax.

Doing these steps for each form increases the code size and the potential bugs, and quickly becomes boring...

As I am working with jQuery, I started looking at existing libraries, and some of them actually solve some of these points, but partially.
The first library to look at is the "official" Form plugin. Unfortunately the main aim of that library is only to submit forms with Ajax instead of a normal POST request. Sending data with Ajax is for me a separated task, as all forms are not necessary sent to the server.
Other libraries offer form validation, like the recent ValidationAide, but are either poorly isolated from other functionalities or reduced to a set of regular expressions.

As often when a need is not satisfied, I decided to build my own library with the following features:

• handling of form content filling and reading
• field validation
• separation between form and field functions
• no functions for submission (rather using jQuery+JSON functions or AjaxPro)
• no superfluous features
  
• full customization available, with lot of default behaviors

and naturally the library will be offered to the community.

A bridge between JavaScript and C#: AjaxPro

It is now very common to JavaScript programmers to call remote procedures on the server, either directly using the XMLHttpRequest object or a framework ensuring cross-browser compatibility.
What is then missing is the server-side machinery able to answer the request. You have to parse the request parameters, process data and build a return value as a string or an XML document. It is relatively simple as long as you are using basic types, but gets complicated if you want to pass a custom object or a DataGrid.
If you are lucky enough to be using .NET, here comes AjaxPro. You create an .aspx page with a public class MyClass. Add a public method MyMethod with the attribute [AjaxPro.AjaxMethod] and that's all. You are now able to call your remote method from JavaScript MyClass.MyMethod(...) just like if it was locally on client-side.

The best part for me is the following: the AjaxPro project manager is planning to make it compatible with jQuery, i.e. make AjaxPro generate JavaScript proxies with the jQuery framework. This will lead the ease of programming and abstraction level one step further.

Discovering jQuery

To ensure cross-browser compatibility in my web sites, I used to use the library from cross-browser.com.
It has interesting features, like providing a "compiler" that extracts only the functions your page actually uses from the library and builds a customized compressed JavaScript file. The form of this library is rather classical, you have a set of functions that you call when needed, no classes or object oriented programming.

I recently discovered jQuery, a JavaScript framework that is a bit more complicated to use, but that allows you much shorter and often quicker code. I recommend it for larger projects. The philosophy is rather different, and explanations would be too long here.

It also has a standardized way of adding libraries, which resulted in a long list of features developed by the community. One of them is Interface allowing animation, drag&drop and many other things with incredible ease.

As I continue using jQuery will I post remarks and tips here.