Form validation tips and tricks using jQuery

I’ll keep this article short and sweet… I love jQuery! The end.

Just kidding! I do love jQuery though. Recently I have written a quick and nice (in my opinion at least) Javascript function to do simple form validation on the client side for me. I am not including the whole function here because I am sure others have posted better solutions online, but I will include the part I thought was cool, thanks to jQuery.

First, a bit of background. My function is invoked upon form submission and expetcted to return true or false, obviously. I am currently passing the list of field ids to it using a global array variable. So I loop through the array to do my checks, and for the ones that don’t pass my validation, I do this:

$('label[for="'+elemId+'"]').attr('class','error');
missing[missing.length] = $('label[for="'+elemId+'"]').text();

Where “missing” is an array I declared within my function, and class “error” is a CSS class with extra styling to make the label stand out, in my case that extra styling is a simple “color: red”. As you may have noticed, this will only work if your form has proper markup, namely if fields have unique ids each, and labels are properly linked to them using the “for” attribute.

Lastly, at the bottom I have:

if( missing.length > 0 ) {
alert("You missed filling out the following required fields:\n- "+missing.join("\n- "));
return false;
}
return true;

You can easily change it so the error message shows up in an existing div you have for that purpose, instead of using alert as I did in my example.

That’s all, I hope someone finds that useful!

Nice looking thumbnails without image manipulation

In this article I’ll explain how you can include the full-size images in your HTML, and use simple CSS to make them look like thumbnails. From my experience this works great for images up to say 1024×768 pixels, and for up to 30 or so images (depending on the size, ofcourse).

Even if you have access to image manipulation functions that make it easy for you. this function can be, in some cases, better than generating thumbnails. One popular example is if you are using lightbox (or a similar solution, and there is plenty of them), sure those clever scripts can pre-fetch full-size images as the user is browsing, but browsing through photos, which the browser downloaded on page load, is even faster!

So, how does this work? Simple! you want to wrap your image with an anchor (link) as you usually do, then wrap the anchor with a div or span element, giving each a unique class name. Example:

<div class="photoContainer" >
<a class="photoLink" title="Photo caption" rel="lightbox" href="/photos/1.jpg">
<img class="photoImage" src="/photos/1.jpg" alt="Photo caption" />
</a>
</div>

Here’s the CSS that goes with that:

div.photoContainer {
float: left;
height: 65px;
width: 100px;
overflow: hidden;
margin: 5px;
}
a.photoLink {
text-decoration: none;
}
img.photoImage {
height: auto;
width: 115px;
}

That’s all! The widths and heights I provided in the example work well with 4:3 and 16:9 aspect ratios, as well as portait photos. Feel free to adjust as necessary but I recommend you test with a variety of photos to confirm they all look good. Enjoy!