Client side validation is checking the values against the desired format before sending them to server side for further processing. Javascript is used for validations on browser. Lately, with the popularity of jQuery, a large number of validation plugins are available which make it even more easy to implement validations on forms.

A word of caution before beginning. Though client side validation is very useful and simple to implement, it should NEVER be thought of as a replacement for server side validations. If the javascript is turned off on the browser or user bypasses it and no server side validation is placed, your application then is at the mercy of users solely.

Read Why you must use server side validation?

So, here is why you should use client side validation.

Easy to implement

Although you can write your own validation for forms, there are multiple javascript and jQuery plugins available that require developers to write minimal amount of code to implement validation. These plugins also provide several options for customized validation like strings, numbers, dates, email addresses etc.

No waiting time for users

Since javascript executes on users browser itself, client side validation provides instant feedback. Plugins like live validation provide helpful messages to users as they type. Besides saving time, this pattern makes data entry less error prone.

Less server trips

Without javascript validation, each time a value needs to be checked, the form should be submitted and server would then process it and show the result. Take for example a text box which asks for email. Possible validations for it could be blank value and a valid email address. With javascript validations in place we can save these trips to server.

Interactive and Fun

Have a look at jQuery inline formValidator. Gone are the days of ugly alert boxes (those were really irritating). With javascript running in browser, you can unleash your creativity and make validation an interactive and fun process by combining html and css with javascript. You can use tooltips and fancy effects to guide your users.

Users love it

Waiting for full page load only to see one error message is no good. Users like instant feedback and helpful error messages. Javascript allows you to create a rich visual experience that is a major trait of rich internet applications.

That’s it for now.

It is worth mentioning again that alone client side validation is no good. Always, I repeat, always use server side validation along with client side validation. This way, in case the javascript validation fails, you can always rely on the server.

Click here to read more about best practices of form validation

Being a web developer there are some tools which I need and use on daily basis. Here are 5 such addons I think every web developer should install on their firefox.

1- Web developer toolbar

Home: http://chrispederick.com/work/web-developer/

Install: https://addons.mozilla.org/en-US/firefox/addon/60

This addon adds a toolbar and a menu to firefox. The toolbar contains several mini tools in it to perform various tasks. It has 11 built in menus for different tasks like cookies, css, forms, html, images and many others. You can read a review of web developer toolbar here.

2- JSONView

Home: http://benhollis.net/blog/2009/02/24/jsonview-view-json-documents-in-firefox/

Install: https://addons.mozilla.org/en-US/firefox/addon/10869

JSON is becoming more popular day by day as a data exchange format. JSONView allows you to view json documents in the browser itself without having to open in any text editor and format it. Local files can also be seen if they have .json extension. It formats the document nicely and also provides options to collapse/expand nodes too (just like XML).
In case of invalid json it reports an error.

3- Fireftp

Home: http://fireftp.mozdev.org/

Install: https://addons.mozilla.org/en-US/firefox/addon/684

You will not have to open a separate ftp client if you use this. To open Fire FTP, go to Tools -> Fire FTP on firefox menu bar. It opens an easy to use interface in a new tab. You can create multiple accounts and you will get all the features that you expect from a ftp client.

From the site: “Along with transferring your files quickly and efficiently, FireFTP also includes more advanced features such as: directory comparison, syncing directories while navigating, SFTP, SSL encryption, search/filtering, integrity checks, remote editing, drag & drop, file hashing, and much more!”

4- IE Tab

Home: http://ietab.mozdev.org/

Install: https://addons.mozilla.org/en-US/firefox/addon/1419

Use IE tab if you want to check display of your web pages in Internet explorer. Instead of opening IE separately, it will open a tab in firefox which will display your page using the IE engine installed on your machine.  It will put an icon on your status bar using which you can switch engines.

5- Firebug

Home: http://getfirebug.com/

Install: https://addons.mozilla.org/en-US/firefox/addon/1843

How can a firefox addons list be complete without Firebug.

From the site: “Firebug integrates with Firefox to put a wealth of web development tools at your fingertips while you browse. You can edit, debug, and monitor CSS, HTML, and JavaScript live in any web page.”

Firebug needs no inroduction to web developers. It reduces the development time to a great extent, specially if your application relies on javascript/ajax too much. It provides rock solid debugging for javascript where you can add/remove breakpoints, watch variables in real time and much more.

Want more? You can inspect and edit html/css on the fly to change the look and feel of a page. You can also check the download time for your css files,scripts, images and html pages using the net tab which are helpful for optimizations.

Firbug has a number of addons too (yes! addons for an addon). I recommend both the addons given below.

Page Speed : It is an addon from Google which is used to analyze the loading performance of a page. It tests a page against Web Performance Best Practices which you can read here. After this a score out of 100 is provided. Greater score means faster page load. Install it from this link.

YSlow: YSlow is a addon similar to Page Speed. It is created by Yahoo. YSlow measures a web page’s performance against a set of rules for high performance pages created by Yahoo. You can download it from here and read the performance criteria here.

Bonus:  Colorzilla

Home: http://www.colorzilla.com/firefox/

Install: https://addons.mozilla.org/en-US/firefox/addon/271

Need to pick a color from any web page, text or image within browser? Just click colorzilla, which sits at extreme left of your status bar, and point to that location. Now right click on colorzilla and you can copy rgb and hex color codes for that color.

It comes with a built in Color Picker and Palette Browser.

In my previous post I discussed about the security flaws and other shortcomings in IE. Incidentally, the same day a news article appeared on BBC News which reported about a new security vulnerability found in IE7. ( Thanks to Jyotsna for passing this news).

The article describes about a new security hole found in IE7 exploiting which hackers can steal the passwords of users. In my opinion this is not a new news. Many more problems were already there with IE6. It is when users come across such a problem, MS people, in haste, prepare a patch and fix it.

Since this new flaw has been found, 2 million users have been attacked and 10,000 websites has been compromised.

Although Microsoft released a patch for the same on the very next day,17th Dec, it will be a mammoth task to reinstall the trust of users, given the number of safer and better browsers available.

Still thinking IE users? Its time to switch now to safer, faster and better. I said earlier too, there are too many options. Choose whatever suits you.

Personally , I will say : Get Firefox

Read the full article on BBC News