Front-End Book

Below I have listed a couple of JavaScript articles you should read to prepare for the awakening of JavaScript as the main web development tool. It doesnt matter if you consider yourself a .NET or Java-developer, if you do not learn JavaScript you will probably have a hard time finding a job within a couple of years if you would like to work with web development. And by the way: JavaScript-solutions today is not the same solutions you where scared with when you grew up.

Writing jQuery Plugins by jQuery Team

One of the strengths with the jQuery javascript library is the plugin framework that lets you easily create your own plugins. This article/HOWTO guides you in the art of writing jQuery Plugins

JavaScript Inheritance by John Resig

John Resig, creator of jQuery JavaScript Library has a nice article on how to simulate inheritance in JavaScript. This article is a good read for people who, by nature and religious reason, avoids JavaScript because the lack of inheritance and other must have OO-principles.

Event Driven JavaScript by Christian Heilmann

Christian Heilmann, Lead Developer at Yahoo!, has written a piece on JavaScript that dives into event driven javascript, custom events and planning your frontend application.

Simple Class Instantiation by John Resig

Another interesting article from John, focusing on Class Instantiation in JavaScript. Do not stop reading after the article, in the comments you find some interesting comments from a lot of people who are well known in the JavaScript-sphere, among them Brendan Eich, the creator of JavaScript.

JavaScript Closures by Richard Cornford

“A closure is formed by returning a function object that was created within an execution context of a function call from that function call and assigning a reference to that inner function to a property of another object.”

Closures are as cool as they are hard to get.

From Most Misunderstood to Worlds Most Popular Programming Language by Douglas Crockford

Douglas Crockford, architect at Yahoo! and introducer of JSON (JavaScript Object Notation) as data interchange format between applications has a mixed emotion relationship to JavaScript, that makes his articles more interesting to read.

Conclusion

I believe that more than 50% of all web development will be made in JavaScript within 10 years. JavaScript is the language for Mashups and AJAX-solutions and we are not going to see fewer solutions based on that. Combine that with open API:s from data providers such as Google, Yahoo and Blogs.

JavaScript is here to stay, make sure you read these good and advanced articles from people who will build the foundation you will develop on tomorrow.

Jörn Zaefferer on the jQuery blog validates his own validation framework against a very good list :-): My blog article Form Validation with Javascript where I stress 10 points to think of when creating a client side validation framework written in JavaScript.

Read more in these post:

About client-side form validation and frameworks on jQuery Blog
Original post on Jörns own blog bassistance.de

Today jquery just got 800% faster. Not bad for a decimal-release. Only one release more will be made on the 1.1 code base.

With this speed increase I think jquery just won the library-war, a measure of its success is the number of diggs it has generated the last 9 hours, approx 1000 and growing.

Good work John and team!

Below you find 10 jquery plugins and jquery extensions you cannot do without if you are a serious front-end developer

1. Easy DOM Creation with jQuery

2. Form plugin

   If you are doing AJAX-stuff, you must have this plugin.

3. Dimensions

   This plugin should be a part of the jQuery Core.

4. Interface

   This library solves 90% of your user interface issues. Excellent work Stefan!

5. Thickbox 3

   Note I have written version 3, I hope this version will be more extendable than the second version.

6. Tablesorter

   Solves a generic problem on medium-sized datasets, I want to see an ajax-extension on this fetching data on the fly when paging the resultset.

7. jQuery Form Validation

   Need I say more, this is the mother of all User Interaction Design Patterns, and it is important that someone has taken this beast on.

8. jQuery Cookie

   Nothing fancy, but a really good plugin. Instead of writing it yourself again, again, again ….

9. JSON

   JSON is what XML should be, jQuery should support it better in the core.

10. Simple Star Rating Plugin

    Nice implemented Eye-candy.

Choosing the correct plugins to gain functionality from is an important detail in your front end architecture and should be taken seriously in order to create a future-proof and well built front end architecture.

This article is an introduction to how to create good form validation with javascript. I will briefly describe the interaction pattern of client side validation with javascript. Later I will focus on 10 actions that will make your form validation perfect.

The Design Pattern of Client Side Form Validation

Whenever a user needs to submit data to your application, there is a need in validating the users input.

Top 10 tips for JavaScript Form Validation

Use a form validation framework or a form validation library

I strongly recommend using some kind of JavaScript-library or framework when implementing your client side validation. On top of that it is important to use/implement a validation framework, this is because you will have bugs and issues with your client side validation, and a framework makes it easier addressing these bugs and issues. When we changed client side validation on a redesign of a larger site lately, we built the validation framework on top of the jquery javascript library. That architecture has made it easier addressing issues and bugs that do arise during development and maintenance of your forms.

Focus on solving the big validation problems

As soon as you start developing and implementing your validation, it is easy trying to address all potential validation that is needed for all types of input. My advice is to try to catch 75-85% of the potential user input errors in the front-end validation. Trying to catch all will lead to the following:

• Bloated code, your framework will grow too large
• More or less impossible to test client side validation as there are too many combinations of validation that can go wrong
• Business rules will move to the front-end.(More on how to avoid this by using Ajax later)

To avoid this I think that creating a small validation framework that can do most of the validation is the way to go, and leave the specific things for the server (or create a plugin to your framework later) to validate.

Do Form Validation before form is submitted

The traditional JavaScript form validation pattern used since the 1995+ is to validate the form when the user hits the submit button, and whenever the script encounter a form item with some error in it, focus on that form item and prompt the user with an JavaScript-alert saying that something went wrong.Today, there is no need doing it that way.In your pursuit of creating the perfect front-end validation framework, you must add the possibility to validate controls on other events than just submitting. I see these potential events:

• Whenever a controls value is changed
• When a control is blurred
• Periodically check if controls has changed
• When a control that is connected to another control changes value
• When a form is submitted
• When a form is reset (if you for some reason finds it intelligent to have a reset-button on your form)

Use Ajax Form Validation for business data input

In order to validate business data you have three alternatives

• Let the server take care of it
• Add business logic to your front-end code
• Let the front-end talk to the back-end through an Ajax-API

My suggestion is to go with the first or the last option, if you go with the last option there are a couple of things to keep in mind

• Make sure your code is secure. Sometimes “smart” solutions like these, exposes business data to people with a little technical knowledge
• Create a server-side API that has a defined set of methods with a defined set of parameters to be sent to it.
• Create a client-side wrapper, wrapping the functionality exposed in the server-side API.
• Only allow communication between the server-API and the client-side API-wrapper
• Make your API-responseType configurable, sometimes you want to show the result as HTML, sometimes you want to manipulate the answer within your JavaScript code and sometimes you will use the response for more queries. I think that the API at least must be able to response with these types:
  • json
  • html
  • xml
  • script
  • text

Typical business data in my mind, are unique usernames and emails, age-validation rules, address verification etc etc

Do extensive testing of your javascript form validation

There is one thing worse than no validation: Validation that do not let correct data through.In order to avoid this, my finding is that coding is a smaller part then the actual testing of the validation framework. My tips is to create unit-tests for all your validation rules as a part of the validation framework, this way it is easy for you/your team to verify functionality whenever a change is needed to your framework

Rewrite input data to valid formats

Some input will come in different formats, dates for example. JavaScript Form Validation should address this problem by rewriting from known invalid formats to the valid format. An example can be:20070325 -> validation rewrite format -> 2007-03-25Because the user has not made an error, he/she has given the system a correct date, it is not his/her problem if the system doesnt use his/her format. The system should then be able to rewrite the known wrong format (20070325) to the system correct format (2007-03-25). Typical areas where reformatting can be used

• Dates
• Time
• Phone numbers
• Social Security numbers / Personal Numbers
• Trim spaces
• Remove/exchange invalid characters

Attach javascript form validation late in the design process

Semantic webs must be able to present forms that do validate and function without the attachment of behavior, which is the case when adding JavaScript Form Validation. Therefore I think it is important to make sure your use-cases is valid with or without the adding of client side validation. If you make sure this is valid, there will be small problems making sure the web is ready for mobile users and search engines.

Make the script i18n- and l10n-compatible

If your web is successful for an international public, the non-english-speaking audience is next. In order to achieve this it is important that even user generated error messages is localised and translated. Make sure your client side validation framework is prepared for translation and other localised parameters such as currencies, dates and time-formatting.

Add callback functions to validator framework

90 % of the time you want to use your validation framework as it was intended to be used, 10 % of the time you will be wishing that your framework would be more generic to achieve some specific interesting effect you have identified while working with your site and validation framework. In order to achieve this I think it is important to add the possibiltity to attach callback functions for your forms, letting the developer use your library in a way you couldnt dream of. The definition of a good library is when people using it creates stuff you as a creator of the library didnt think was possible.

Make your framework/library extensible

If you add working hours to a framework or a library, it is important that the architecture of the library/framework is open, and is extendable.

Resources

• Jörns Demo of jquery form validation
• Will Jessup has a nice example of form validation with jquery.

When we redesigned two of our sites we put a lot of effort into making the signup process better and focused on making a lot of input validation before posting the page. We also knew that there is a lot of business data that we need to validate before posting the whole signup form, this was achieved with ajax calls to an api. Now we use a jquery validator, implemented as a smarty-plugin, all over the site whenever we have a form with user input. We have found that despite the focus on DOM-manipulation and a lot of graphical plugins, jquery form validation is very powerful combined with the graphical effects you can easily achieve with the library.

See our longer article on Form Validation in general and 10 tips making it work better for you.

Smarty and jQuery should make the perfect couple done right in your front end architecture.

Load javascript when you need it. This is interesting. Mainly for javascript intensive webapps that makes heavy use of a lot of different javascript modules, modules that should be loaded whenever needed.

• Ajaxian » Prototype Extension: Dynamic Script Pattern Support
• On-Demand Javascript at AjaxPatterns
• jQuery mailinglist discussion

Found this really good looking plugin for jquery that tweens/animates between muliple pages/images. You can easily extend it with your own tweening functions. There is probably a lot of work still needed on this plugin, but if he makes Will Jessup manages to remove all bugs and add the functionality he mentions on the site, I believe it can be a really nice plugin for galleries and other areas of a site where you would like to step through a big set of pages/images.

• Tweenbox

I belive that jquery form validation is something that should be put into the core of jQuery UI or other software package that further enhance the UI with jQuery, maybe the integration of jQuery into .NET or jQuery on Zend Framework 1.7 will enable jQuery driven form validation. A couple of weeks ago I started myself to implement an unobtrusive form validation script named jform, based on jQuery, unfortunately I have not had the time to keep up the work on the script (two kids takes time from writing code in your “spare time”). But as I feel the need for a script that works out of the box without any particular configuration, I will probably start focusing on the script whenever I happens to find an hour or two to spend on the script.

Updates on jQuery Form Validation

2007-03-30

I have written a piece on JavaScript Form Validation in general today, I will add a section on jQuery form validation is specific. Go there to read more about javascript form validation.

2007-03-07

• Jörn Zaefferers jquery form validation plugin has gone beta today.
  

  Most notable new features:
  - dependency checking: The required method accepts both
  jQuery-expressions and functions to compute whether a field is required
  or not
  - customizing error message handling: From doing it all yourself (and
  still delegating to the default handler) to customizing the placement of
  generated error messages

  In Jörns API-browser you can get all documentation you need for the jquery form validation plugin.

• Jörns Demo of jquery form validation

2006-08-23

• Will Jessup has a nice example of form validation with jquery.

Original Post
A really nice jQuery form validation plugin can be found at Jörn Zaefferers Blogfuzz.bassistance.de. I have been looking for a good jquery validation plugin for of forms, maybe this plugin is fit for combining with a server side form validation plugin for smarty. Of course a business-rules integration also can be made using jquery ajax calls against an server exposed api.

Read or full length article on Form Validation with JavaScript.

Even more articles like this can be found on the section where we discuss front end architecture.

Finally, someone have written a poker-client in javascript using Ajax-technologies for client-server communication. Awesome. They use the Google Web Toolkit. Awesome work.

Try GPokr out.