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

innerHTML is commonly used property for setting html content of elements. Though it is not a standard property, even then all browsers support it. It is faster then using DOM methods like createElement and appendChild.

You can use it to set html for almost all elements. In internet explorer there are some exceptions. You cannot set innerHTML for elements of a table and select box.

Recently a reader asked me the workaround for setting options inside a select box with the help of javascript or jQuery. In this post I will explain some methods which you can use as an alternate to innerHTML.

Here is a html select box.

<select id="selectBox">
</select>

Now let us look at various options available to us.

Using innerHTML

This is the problem. This method will work in all browsers except IE (i have tested till IE8).

var select = document.getElementById('selectBox');
var options = '<option>option 1</option>';
options+= '<option>option 2</option>';
options+= '<option>option 3</option>';
select.innerHTML = options;

Using DOM – Works in all browsers

var select = document.getElementById('selectBox');
for(var i=0; i<3; i++)
{
	var option = document.createElement('option');
	option.appendChild(document.createTextNode('option' + i));
	select.appendChild(option);
}

Using jQuery

Method 1- This will work in all browsers.

$('#selectBox').append('<option>an option</option>');
$('#selectBox').append('<option>another option</option>');
$('#selectBox').append('<option>yet another option</option>');

append method appends the html at the end of an element.

Using jQuery

Method 2 – This will also work in all browsers.

var options = '<option>option 1</option>';
options+= '<option>option 2</option>';
options+= '<option>option 3</option>';
$('#selectBox').html(options);

html() method in jQuery can be thought of as a counterpart of the innerHTML property.

That is all folks. Hope it helps you. If you know of any other technique, do let me know in comments.

Ajaxian

Ajaxian covers all news related to javascript, libraries, AJAX related news, technologies, libraries, browsers quirks etc.

Why?

Definitive resource for AJAX whether you use it with PHP, Perl, NET(argh!) or whatever else. This blog should not be missed.

A List Apart

This is a classic one. The creators of this web magazine call it “For people who make websites”.

A List Apart Magazine explores the design, development, and meaning of web content, with a special focus on web standards and best practices.

Why?

If you want to know all about building websites including design, code, writing compelling content and project management, this is the place.

Cats Who Code

Cats Who Code is a blog by Jean-Baptiste Jung who is a web developer and professional blogger.

Why?

For lots of helpful code snippets, lists and hacks on PHP, jQuery and definitive information on a variety of wordpress topics.

CSS-Tricks

CSS-Tricks is a website by renowned design ninja Chris Coyer where he shares his CSS secrets.

Why?

For detailed articles on how css works, browser hacks, cross browser compatibility and HTML 5.

Nettuts+

A part of Tuts+ Network, this site contains tutorials and screencasts on HTML, CSS, Javascript/jQuery, PHP, Ruby on Rails etc.Though most of the articles are free, it also publishes premium tutorials which are available for a small fee.

Why?
High quality articles that explain each topic step by step in detail and are very easy to follow even for a beginner.

PHPDeveloper

This site has been around for a long time and is a trustworthy source for news that is all PHP. Besides news, it also updates users about php conferences, jobs and new web technologies regularly.

Why?

All awesome news of PHP at on place.

Six Revisions

Despite the fact that this site is only 3 years old, it already has made a reputed name in community. It was founded by Jacob Gube who himself is a designer/developer, this blog now publishes web design related articles of authors from all over the world.

Why?

For high quality resources and articles on web design and development, web standards.

Smashing Magazine

Founded by German designers Sven Lennartz & Vitaly Friedman, for the past 4 years smashing magazine has been publishing high quality articles on web design. SM has also created what it calls “Smashing Network”. Smashing network is a channel of 30+ web development/design blogs.

Why?

Insightful and innovative articles focused primarily on web design. Very high quality content and free goodies like wallpapers, themes and wordpress themes.

Bonus

Every year in December many sites create an advent calendar that publishes 1 article per day starting from 1st of December till Christmas. Below are 2 of my favorites.

24 ways – http://24ways.org/

24 ways started out in 2005. Here is the excerpt from the site itself.

24 ways is the advent calendar for web geeks. Each day throughout December we publish a daily dose of web design and development goodness to bring you all a little Christmas cheer.

PHP Advent – http://phpadvent.org/

Curated by Chris Shiflett & Sean Coates, PHP advent started in 2008. Since then, it has been publishing articles on PHP and related technologies each year till Christmas in the month of December.

All article are written by well known developers and experts.

While coding jQuery or javascript, sometimes we need the tag name of an element. This post will show how you can retrieve the tag name of an element easily using jQuery

We know that each DOM element has a tagName property. We also know that most jQuery methods return jQuery object. Therefore to get the tagName, we need to extract the DOM element from it. This can be achieved in 2 ways.

Method 1: Using get() method of jQuery

jQuery’s get() method returns the collection of DOM elements for a jQuery collection.

Consider the following markup

This is a div

In this case $(‘#firstDiv’) will be the jQuery object for above div. To get tag name for correspoding DOM element use the following

var element = $('#firstDiv').get(0);
var tagName = element.tagName;

Note that get() returns an array, hence 0 based indexes to retrieve elements. Have a look at another example.

paragraph element

    span element

var a = $('#secondDiv').children().get(0); // INPUT
var b = $('#secondDiv').children().get(1); // P
var c = $('#secondDiv').children().get(2); // SPAN

Method 2: Using this

You can also use this to refer to DOM elements as shown in next example. Code below use the same markup for secondDiv.

$('#secondDiv').children().each(function()
{
	var tagName = (this.tagName).toLowerCase();
});

The returned tag names will all be in uppercase. You can use javascript function toLowerCase to make them XHTML compliant i.e. lower case.

Presenting list of 61 jQuery plugins for galleries and slideshows. All of them are different and you can choose from them depending on the project you are working on.

If you come across any plugin which I have  not included here, please take a moment to add it in comments. I will update the post. The list is in alphabetical order.

• AD Gallery
• BarackSlideshow
• CeeBox
• ColorBox
• Create a Resizable Image Grid with jQuery
• Create Beautiful jQuery slider tutorial
• CrossSlide
• Easy Slider
• EOGallery
• Facebox
• Fancy Thumbnail Hover Effect
• FancyBox
• FancyZoom
• Flickr Gallery
• Galleria

• Galleriffic
• GalleryView
• Greybox Redux
• Image Flow
• Image Gallery by qd-creative
• ImageBox
• ImageCube
• Innerfade
• Interface Imagebox
• jFlow
• jQuery Cycle
• jQuery Gallery Plugin
• jQuery Gallery Scroller
• jQuery Image Strip

• jQuery Lightbox
• jQuery PanelGallery
• jQuery spherical panorama viewer
• jQuery Virtual Tour
• JQZoom
• Moving Boxes
• nyroModal
• panView
• PictureSlides
• Pikachoose
• Pirobox
• Polaroid Photo Viewer
• Popeye
• prettyPhoto
• s3Slider
• ScrollShow
• Sexy Lightbox2
• Shadowbox
• Simple Controls Image Gallery
• Simple jQuery Slideshow
• slideViewer
• Sliding Image Gallery
• Slightly ThickerBox
• Smooth Div Scroll
• Spacegallery
• Start/Stop Slider
• Step Carousel Viewer
• Supersized
• ThickBox Gallery
• TopUp
• Ultimate Fade In Slide Show
• Zoomimage

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.

Normally google maps js api is loaded at the time of page load via a script tag with src set. If map is not so major feature of your application or you want to reduce page download time, you can defer loading the javascript load it when required.
This is a javascript pattern called On demand javascript.

Bottomline is: “JavaScript being pulled from the server after the page has loaded“.

Google maps provide the facility to dynamically load the api when required.  So no need to load it at the time of page load. I will present an example here which will load the maps api on click of a button. Here is how to do it.

As said above, DO NOT load any javascript api from Google using script tags. Instead we will use a button.

To load the api onclick of this button, create a script tag, set its src and append it to document. This will load the Google AJAX API required to load other google APIs.

function loadAPI()
{
    var script = document.createElement("script");
    script.src = "http://www.google.com/jsapi?key=YOUR_API_KEY_HERE&callback=loadMaps";
    script.type = "text/javascript";
    document.getElementsByTagName("head")[0].appendChild(script);
}

Do not forget to replace the API key above with your API key. (You can get an API key by signing up here)

Important: Note the callback=loadMaps in script.src. This is the thing doing all the magic. It tells which function to call when AJAX API has loaded. In above case it will call loadMaps function. So, let us define that.

function loadMaps()
{
    //AJAX API is loaded successfully. Now lets load the maps api
    google.load("maps", "2", {"callback" : mapLoaded});
}

loadMaps function uses load method of google AJAX API to load a specific api. Above we loaded “maps” version “2″. Again callback is the name of function that will be called when maps api is loaded. callback function will be called only when the maps api is loaded successfully.

function mapLoaded()
{
    //here you can be sure that maps api has loaded
    //and you can now proceed to render the map on page
    if (GBrowserIsCompatible())
    {
        var map = new GMap2(document.getElementById("map_canvas"));
        map.setMapType(G_SATELLITE_MAP);
        map.setCenter(new GLatLng(28.631466106808542, 77.07853317260742), 5);
    }
}

That is all to it. I have created a demo along these lines. View source for code. You can see it here.

If you have started using jQuery recently and you  are used to DOM methods of getting and setting values for form and html elements, this article is for you.

Using jQuery can be confusing in the beginning but it is a lot easier once you get hold of it. In this post I will summarize methods for getting and setting values for html elements using jQuery. I assume that you are familiar with the $ function. Though it can be used in different ways to select elements, we will stick to selecting elements by id for the purpose of this tutorial.

An element can be accessed using its id as follows:

$('#someId')

Textbox, Hidden field and Textarea

All these elements share a common method. val() method is used to get and set values for these elements.

Setting:

$('#someid').val('any value')

will set the value of textbox to “any value”.

Getting:

$('#someid').val()

will get the value of that text box.

Radio Buttons and checkboxes

attr() is used to check/uncheck and select/unselect radios and checkboxes

Setting:

$('#id').attr('checked', true)

will select the control

$('#id').attr('checked', false)

will unselect the control

Getting

$('#id').attr('checked')

This will give true if radio/checkbox is checked/selected, false otherwise.

Select box/ Combo box

A notorious control, jQuery makes it very easy to get and set value of a combo box.

Setting:

$('#selectbox').val('1')

Pass the value of option that you wish to select to val()

Getting:

$('#selectbox').val()

This will give value of currently selected option in combo box

Setting/Getting innerHTML  of other elements

Just like innerHTML, jQuery provides a handy function to manipulate innerHTML for all html elements.

Setting:

$('#somediv').html('some html inside a paragraph')

This will set the innerHTML of element with id somediv

Getting:

$('#somediv').html()

This will return the innerHTML of an element.

Thats all to it. Again, a demo can be found at this link (and obviously source code too). You can always shoot me a mail in case your question is not answered here.

Give this article a thumbs up on stumble upon if you liked this

I am a regular reader of web development articles and in this process bookmark a lot of them. Out of that collection I present to you a list of 10 articles which themselves are lists of 10(tips, functions etc). Not all of them are top 10 but equally good. All these articles are related to php, javascript, html, mysql and web development in general.

1- 10 code snippets for PHP developers

Simple and handy functions for common tasks like validating email address and XSL transformation.

2- 10 Advanced PHP Tips Revisited

Detailed and excellent tips from famous PHP gurus Chris Shiflett and Sean Coates.

3- Top 10 PHP frameworks

PHP frameworks are quite popular among developers these days. This site is dedicated to php frameworks alone. In this article all frameworks have been compared for features. Very useful to help you in decision making if you are planning to use a framework for your next project.

4- Top 10 custom JavaScript functions of all time

This is my favorite one. These 10 functions are a must in every web developer’s toolbox. Functions like getElementsByClass, toggle and cookie functions are included.

5- 10 JavaScript Quick Tips and Best Practices

Another good article on javascript best practices.

6- Top 10 Firefox Addons For Web Developers

Who hasn’t heard of Firebug or GreaseMonkey. This article lists similar addons for firefox that are a great help in web development.

7- 10 Ways to Improve Your Web Page Performance

From the article:

This article primarily focuses on front-end performance since it’s the easiest to work on and provides you the most bang for your buck.

8- 10 Dirty Little Web Development Tricks

Simple tips to help you in web development.

9- 10 Rare HTML Tags You Really Should Know

List of 10 html tags that are not used frequently. Check them out. It is possible that you have not heard about some of them.

10- 10 Useful articles about Database design

From the article:

The list includes some tips to define relationships-entities model, common database design mistakes, database normalization, how to use PHP and SQL to create tables and relationships and a correct approach to define relationships between tables.

1- Use short hand notation for declaring arrays and objects

Arrays and objects are declared as following:

var someArray = new Array();
var someObject = new Object();

There is a shorthand notation for declaring these which is much more easier to use. It can be used like this:

var someArray = [];
var someObject = {};

2- Use square bracket notation – [] – to access property of an object rather then using . (dot) notation

There is a good reason why you should do this. Suppose you have an object like following:

var myObject = { "name1" : "some name" , "name2" : "another name" , "name3" : "yet another name" };

Properties of myObject can be accessed using either of the 2 ways.

var value = myObject["name2"]; // will output another name
var value = myObject.name2; // will output another name

Now assume you want to access these values dynamically (probably in a loop). Now see what happens.

var result = myObject.name + i; //this is an error

var result = myObject['name' + i]; // this is good. will output correct value depending on value of i

If you take the first approach, you are in a mess. It will look for myObject.name and will try to add the value of i to it and thus an error
Using the second method is safer and readable too.

3-    Break a long string into multiple lines

This surely makes code more readable. You can do it like below.

var longStr = "This is a long long "
+ "string which has been "
+ "broken into "
+ "multiple lines.";

Think there is only one way of doing so? No, Here is another(lesser known) method:

var longStr = "This is a long long \
string which has been \
broken into \
multiple lines.";

4-    Specify radix while using parseint (always)

Just try this.

var result = parseInt("012"); // gives 10

Baffled!!! You expected 12 but got 10. Solution? Always specify the second parameter(radix) while using parseInt. By default parseInt considers strings starting from 0 as octal numbers. So unless you want an octal or hexadecimal just pass 10 as second parameter to parseInt. Read more details about this behavior on this post.

5- innerHTML is faster than w3c DOM methods

There are 2 ways you can alter content of any html element from javascript. innerHTML property or w3c DOM methods. Wherever possible user innerHTML because it is faster than DOM methods. Quirksmode.org has a test which measures the execution times of various methods in different browsers (http://www.quirksmode.org/dom/innerhtml.html). All results show that innerHTML is fastest.

6- Setting innerHTML does not always work (in IE specifically)

Yes, that’s right. Manipulating the DOM from javascript is a common practice.

document.getElementById(id).innerHTML = 'some html';

However, the above does not work in IE for some elements. Don’t know why MS did it. (Read what MSDN says). The elements for which innerHTML can’t be set are col, colgroup, frameset, head, html, style, table, tbody, tfoot, theaf, title, tr. Trying to set innerHTML for these elements will fail. Instead, use DOM methods for these elements.
Also, setting innerHTML of select box cannot be relied upon  in IE (Read full article here).
It displays some weird behavior. Avoid innerHTML for select too. As said above, use DOM methods in this case.

7- Always count large arrays before iterations

0k. This is not particular to javascript but applies to all languages. Consider an array of 10,000 items.
Normally, a for loop will go like following:

var largeArray; // // this array has 10,000 items
for( var i=0; i < largeArray.length; i++)
{
    //do something
}

In above case javascript has to calculate length of array in each iteration and then check the termination condition. It will be far more efficient if we calculate length of array before loop, store it in a local variable and use this local variable for comparison.

var largeArray; // this array has 10,000 items
var l = largeArray.length;
for( var i=0; i < l; i++)
{
    //do something
}

This will save javascript from calculating the array length in each iteration and will be faster.