Category Archives: Development

jQuery Form Validation

Leave a reply

We do very little true data entry into our systems database. Most of what we do is updating the information already in, or adding an entry to the activity log for a server. I hadn’t really given much thought to form validation, until a coworker asked for it. Once again, there is already a jQuery plugin that does a fantastic job of this.

The jQuery Validation plugin works on many different levels. First, and most commonly, it will validate that you have entered values into required fields.

Beyond that, you can validate the data entered into the field is in the format you desire. Types include email, url, date (mm/dd/yyyy), ISO date (yyyy-mm-dd), number (float), digits (integer), credit card, US phone numbers, and equal to (retyping email address as an example).

You can also do min and max lengths, min and max values, as well as ranges. The best part is that you can force any of the format validation without making the field required entry.

For me, what makes this plugin hot with a capital HAW, is that you can do remote validation before the form is submitted. One of their demo pages is a mock signup form for Remember The Milk (type “Peter” in the username field). With this demo, the username field is set to remotely verify with an external source — in this mock-up it is just a static array in a PHP file — that the value you have entered doesn’t already exist. They are even nice enough to give you both the jQuery script and PHP code from the example.

I’m still in the process of adding the format validation to non-required fields in our system, but I’m already rawking the required validation, as well as the remote validation for unique values like host name and server name.

jQuery Table Sorting and Paging

8 Replies

As I set out on re-writing the interface for my systems database, on thing I knew I wanted to implement was better sorting, and pagination. In v1 I implemented sorting through GET statements, and requerying the database according to the choice of column and direction.

I used this tutorial as the basis for my own “plugin” to jQuery. The authors do a good job of explaining all that they are doing with their Javascript code. They, very helpfully, present the full 100+ lines of code at the bottom of the tutorial. After my copy/paste of it, I set out to make it work for me.

First of all, your table needs to be setup in the following standard structure:

<table class='sortable paginated'>
<thead>
<tr>
<th class='sort-alpha'><span class='ui-icon ui-icon-arrowthick-2-n-s'></span>Column 1</th>
...
</tr>
</thead>
<tbody>
<tr>
<td>Field 1</td>
...
</tr>
...
</tbody>
</table>

Three quick things you’ll notice, 1) the two classes on the table (sortable and paginated), 2) the class on the TH (sort-alpha), and 3) the SPAN is for a jQuery UI icon feature. I’m going to state the obvious here, if you include the class “sortable” on the table, then it will be made sortable, and if you include the class “paginated”, the table will be paginated.

The class on the TH tells it how to process the sorting: sort-alpha, sort-numeric, and sort-date are all available. The first click on the header sorts ascending, the second sets it to descending, the third back to ascending, and so on.

A nice side benefit of using sortable or paginated on the table is that it also dynamically adds an “odd” or “even” class to each row for styling purposes. And this odd/even is refactored with every sort.

I did have to make a few modifications to the jQuery code I found.

First, they use the Javascript function of lt() and gt() in the pagination, to hide the rows below and above that page. In my testing, using FF3 primarily, the DOM doesn’t support lt() and gt() anymore, so I modified the code to use the slice() function.

Next, the sorting, on the first click, would add the sorted-asc class, and the second would add the sorted-desc class, but the second would not remove the sorted-asc class. This kept it from sorting it decendingly. Because jQuery is chainable, I just added a .removeClass(‘sorted-asc’) for the even numbered clicks, and a .removeClass(‘sorted-desc’) for the odd-numbered clicks. I also threw in some similar code that acts the same way to stylize the TH in line with the jQuery UI plugin, changing the SPAN arrow class, and on all of the TH blocks adding/removing a “ui-state-active” class where appropriate.

The last change I made was adding a “View All” option. A coworker asked if I could do that, since it is nice to see the full table in non-paged sometimes. To achieve this I added a View All link to the end of the paging links, and when this link is clicked it re-paginates the table setting the “current page” back to zero (the first page), with the number per page equal to the number of rows. Then when one of the paged numbers is clicked it changes back into the normal mode where number per page is equal to your defined number.

Here is my code. As I said, mostly taken from this tutorial, with my modifications described in this post.

jQuery Sortable Pagination Plugin

Database of Systems

Leave a reply

When I started in my current job about 18 months ago, I was taking over some responsibilities from a guy who had been gone for six months already. Very quickly I learned that what was documented was done pretty well, but there was quite a bit of stuff that wasn’t documented.

Beyond the lack of documentation about how some things had been setup and configured, there wasn’t any real good record keeping on all of the systems we had. We had a wiki page listing most of the servers, and a few columns of data, but it was a wiki page; designed more for documentation and note taking, not so much for entering and tracking the minute details about servers.

So I set about to create a database and web front to track this minute detail. Version 1 wasn’t perfect, but it got the job done. We could track the specifications of the hardware (RAM, CPU, disks, power supplies, etc), what OS was installed, physical location, backup information, reboot instructions, etc. We started to dig in to bringing our network equipment into the mix. The one part that was the most challenging, but most rewarding, was taking the physical location information, and producing a dynamic rack map for our various server rooms. At the time I built v1 out we were really just beginning conversations about virtualization.

A simple payoff came not too long after releasing v1 to the office. In a meeting something was mentioned about how we had roughly 40-50 servers, but I was able to say with certainty that we had nearly 90. It’s almost like one of those guess-how-many-marbles-are-in-the-jar games, except with hundreds of thousands of dollars of server equipment, and they had obviously guessed low.

Jump forward to 2009, and we are now implementing virtual hosts, and migrating some of our services to said hosts. Over the last month I’ve been working on v2 of the systems database, breaking my tables up into clear separations of the physical and software portions of the server. I had originally built it where the “guest install” and the “physical host” were one in the same. I’ve also been able to make further additions for the networking equipment, so hopefully we’ll be able to log that stuff in as well.

I’m still in the development phase of v2, but I’ve made some big strides with it already. With v1 I rolled almost everything by hand. In v2 I decided to take advantage of the magic of jQuery. The results so far have been very nice, but I still have more to go. Over the next while I’ll highlight some of the jQuery stuff that I’m using.