CODEWITHSUNDEEP
javascripthtml
Nate
Nate

Reputation: 28404

How to output an error when more than one element has the same id?

Because I don't have a strict naming convention for divs, spans, and inputs, I frequently give more than one input the same id by accident, which of course causes jQuery/javascript code to not work.

Giving more than one element the same id is not allowed, but I don't see any kind of error message anywhere when it happens, so when I do this it sometimes takes a lot of time before the "oh duh" moment where I realize what I did.

Is there any way to know when more than one element has the same id?

Upvotes: 2

Views: 670

Answers (4)

kyle.stearns
kyle.stearns

Reputation: 2346

This is going to be a standard practice you're going to learn through writing HTML over and over, time and time again! A good way to avoid using duplicate ID's would be to use less ID's and maybe use classes in their place.

Only use ID's for important/structural elements on your website such as #header, #footer, #main, #slideshow, #content, #sidebar, etc.

If you're repeating ID's over and over on a page maybe you should be using classes. Any element/styled module that is going to be reused on that a multiple times should be identified using a class.

Also, some IDE's will perform some special syntax highlighting/text-decoration to let you know that something funky is going on. Two that come to mind immediately are SublimeText2 and Visual Studio.

Here's a jQuery snippet you can run to check for duplicate ID's on a page. It will let you know in your Console (F12 developer tools/Firebug) if there are any duplicates on the page.

(function () {  
    var found = false;  
    $('[id]').each(function () {  
        var ids = $('[id=' + this.id + ']');  
        if (ids.length > 1 && ids[0] === this) {  
            console.warn('ID used more than once: ' + this.id, ids);  
            found = true;  
        }  
    });  
    if (!found) {  
        console.log('No duplicate IDs found');  
    }  
})();

You could throw this in your global footer so that it runs on every page, just be sure you take it out before going to production.

Here's a JSFiddle: http://jsfiddle.net/A7h75/

Got the script from here.

Upvotes: 3

Ejaz
Ejaz

Reputation: 8872

you could utilize this function to check for duplicates 

function getDuplicateIds(){
    var dups = [];
    $('[id]').each(function(){
        if($('[id="'+$(this).attr('id')+'"]').length > 1) dups.push($(this).attr('id'));
    })
    return $.unique(dups);
}

Upvotes: 0

thaJeztah
thaJeztah

Reputation: 29077

You can check if your HTML is valid via the W3C Validator Service

This will show you all errors in your HTML and is advisable anyway just to check your HTML for errors that may cause cross-browser rendering problems

Various extensions exist for Firefox and Chrome to check your HTML without having to visit the Validator service 'manually'

Upvotes: 1

John Conde
John Conde

Reputation: 219864

A good IDE will catch this for you. I use Zend Studio (which is essentially a PHP specific version of Eclipse) and it will catch this for you as you write your code. That's about as soon as you can catch it.

Upvotes: 1

Related Questions