I am working on a bespoke issue-tracking system at the moment (not for code issue-tracking, in case anyone thinks we’re cloning Redmine; although there certainly are overlaps…) in which each issue has a list of personnel, each of whom have a role on the issue.
The task at hand is to prevent people selecting the same combination of role and person more than once. Of course, the application and database will reject such an occurence; this is to fix the UI so that users can’t easily submit the duplicates. For the purposes of this explanation, we’re working only in HTML and Javascript (jQuery).
The UI looks something like the screenshot to the right (there is also a means of adding new rows to the table—that doesn’t change how this validation works, but it is why we’re using .live() below):
The Problem
In an HTML table full of form elements, where new rows can be added (dynamically), we want to prevent duplicate rows being selected.
The Plan
After changing a value in any row, get a list of the values in that row and then go through all of the rows and see if those values are there. If we find more than one instance of them, tell the user and return the changed value to what it was before.
The Solution
The final code is below (it was built using jQuery 1.6.1 and jQuery UI 1.8.5), and a demonstration is available elsewhere.