Go Back   vb.org Archive > vBulletin Article Depository > Read An Article > General Articles
Reload this Page DJ's "How to Validate Your vBulletin" for Beginners
FAQ Community Calendar Today's Posts Search

Reply
Page 2 of 3 1 2 3
 
Thread Tools
DJ's "How to Validate Your vBulletin" for Beginners
Digital Jedi's Avatar
Digital Jedi
Join Date: Oct 2006
Posts: 5,171

I buttered my rolling stone, now I have to lie in it.

PopCulturalReferenceLand
Show Printable Version Email this Page Subscription
Digital Jedi Digital Jedi is offline 01-02-2011, 10:00 PM
So, someone has told you that your site doesn't "validate" or that it's giving off "validation errors" and you have no idea what the blazes they're talking about. What's worse, they have suggested that those errors may be the cause of the problem that you've just asked about in the forums. What do you do?

The following article will attempt to explain what validation is, and help you to root out validation problems with your forum. Just be aware that you're going to have to learn some new stuff that you didn't know before, and maybe you didn't think mattered. But it does matter, and I'll try and help you understand why.


What is Validation, Anyway?
What are you browsing this forum with, right now? If you're just using the stock browser that came with your computer, then you're probably using Internet Explorer or Safari. Maybe you decided to use a popular free browser, like Mozilla Firefox? Google Chrome? Opera? Maybe you're browsing the internet using something a little lesser known, like Flock or Konqueror. Whatever your poison, for whatever reason you have, you're using a browser made by one of many different developers. And because they're all different, they each have a way of rending the code in your webpage a little bit differently then the others. That's where W3C comes along.
[imgrft]http://www.cogonline.net/forums/images/articles/W3C.png[/imgrft]
The World Wide Web Consortium (W3C) exists to make sure there is a standardized way of writing code, so that browsers across the board will render your webpage the way you intended it. You see, just like technology, sometimes code can become outdated. Some code is supported by one browser, and not by another. But by using the W3C standards, you can check to see if your website is using up-to-date code that will render the way you intended it to, across the vast spectrum of internet browsers.

And this is partially what we mean by validate. W3C provides a nifty little validation service at http://validator.w3.org. Here you can put the URL (URI) to any given webpage into the Validator, and it will let you know if your site passes validation:


Or if you've got problems you need to work out:


The Validator also lets you validate pages using the source code (Direct Input) of your web page or by uploading an HTML document directly. When validating vBulletin, you're most likely only going to want to use URI and Direct Input.

Validation isn't only just for making sure your site renders across web browsers. Validation is also for making sure your code is correctly formatted. Sometimes, an error that you just can't figure out is because you have an improperly formatted HTML tag somewhere in your document. Maybe more than one. The Validator will let you know if you do. It's also a way of making sure your website is accessible to people with disabilities, say, people who have to surf the web using a reader.

OMG! WHAT DO I DO NOW???!!!
More than likely, if your a new vBulletin owner and know nothing about HTML, and you've just checked your site in the Validator as a result of this article or an instruction on the forums, then you're noticing you have a LOT of errors. First thing to do, is to calm down and stop typing in all CAPS. Second thing to do is to read on. You've got problems and you need a clear, calm and patient head if you're ever going to work them out.

Using The Validator
The first thing you'll want to do is to pick a Document Type Declaration (DOCTYPE). The DOCTYPE begins the HTML of your web pages and will tell the Validator which version of HTML it should check it against. More than likely, and to keep this article simple, we'll assume you need XHTML 1.0 Transitional. By default, this is what your vBulletin has as its DOCTYPE anyway, and for the purposes of this article we'll assume you want to keep it this way. There's other reasons why you'd want to choose other DOCTYPEs, but you can learn about those on your own once you feel you need to and have picked up the basics. I would venture to say it's the most common DOCTYPE chosen for your type of website anyway.

HTML Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
vBulletin lets you edit your DOCTYPE via the Admin CP pretty easily. The DOCTYPE is displayed per style, so you have to check each of your styles to make sure they each have the DOCTYPE you want.

It's in the same location in both vB3 and vB4, but the final destination looks a little different. Simply go to Admin CP ? Styles & Templates ? Style Manager ? ??SELECT STYLE? ? StyleVars ? HTML Doctype to check it out:




In addition, you may find that some of your templates are missing the required XMLNS attribute for their root element. Simply put, the XMLNS attribute for your HTML tag should look like this: xmlns="http://www.w3.org/1999/xhtml". Therefore, your templates' opening <html> tag should look like this:

HTML Code:
<html xmlns="http://www.w3.org/1999/xhtml" dir="$stylevar[textdirection]" lang="$stylevar[languagecode]">
NOTE: This is presuming that your template starts the HTML in your web page. Just like the DOCTYPE, it's not necessary for it to exist in every single template. Only those templates that create the first lines of your web pages.

Now that you've done that, we've got one more step before running a validation check. Go to your Admin CP ? vBulletin Options ? vBulletin Options ? General Settings ? Add Template Name in HTML Comments and set it to Yes. What this does is add <!--HTML Comments--> to your website's source code. If you know anything about your template system, you know that each of your templates are like the pieces of a big puzzle making up all the content of your forum. With this enabled, your forum's puzzle pieces, or rather, your templates, are now marked where they start and where they end with comments in the HTML source code. You see, now that we can tell where our templates begin and end, we'll more easily be able to find which templates have our errors:


Now you're ready to run the Validator against the pages of your website. Pick a page and enter the URL into the Validate by URI tab, or open up the source code of your web page and copy and paste it into the Validate by Direct Input tab. The reason you'd chose Direct Input over just using the URI is because the Validator can only check the HTML it can see. That means it can't see all the HTML that will be generated in a web page when a Registered User is logged in or has special permissions. Anything that a User might see that a Guest would not will determine when you want to validate using Direct Input. So keep that in mind. A webpage might validate just fine for a Guest, but have errors when displayed to someone who is logged in.

Before you hit that Check button, open up the More Options arrow just below the Validator and check the box called Show Source. We'll need that enabled if we're going to track down our errors.

Understanding the Validator
Now comes the hard part. You've clicked Check. And you've got errors. Maybe hundreds of them. The first time I ever ran the Validator against my home page I ranked OVER 600 ERRORS! Again, don't panic and stop typing in all CAPS. I'll show you some common errors and how to go about fixing them.


If you look at the image below, you'll see that all the errors are pretty much listed in the order they were detected and marked by the line they appear on in the source code. And because Show Source was enabled, the source code to your web page is being displayed at the bottom of the page under all the error results. Clicking one of those numbers will jump to the line in the source code where the Validator thinks the error begins.


Notice I said, where it "thinks" it begins. You see, the Validator only detects the first place where the code doesn't look right. Any thing after that might display as an error solely because the code before it isn't correct. For example, this is a basic table tag:

HTML Code:
<table>
    <tr>
        <td>Table Title</td>
    </tr>
    <tr>
        <td>Table Content</td>
    </tr>
</table>
Properly written code will ensure that tags don't overlap. Tags open and close like this: <TAG></TAG>. So in the example above, the TRs are neatly opened and closed inside the TABLE tags, and the TDs are properly opened and closed inside the TR tags. In other words, they're all properly nested.

Now let's say you goofed and have an open <table> tag. You forgot to put in the closing </table> tag for that table. Way down at the bottom of the page is a closing </table> tag, but for a completely different table, one that is properly opened and closed:

HTML Code:
<table>
    <tr>
        <td>Bad Table</td>
    </tr>

<!-- Lots of code-->

<table>
    <tr>
        <td>Good Table</td>
    </tr>
</table>
The Validator will look at the opening table tag and expect it to close at some logical point. So it knows that certain other types of tags should not appear before that </table> tag does. If that does indeed happen, the Validator will stop right at a character and mark the line and character where it believes the code has started to loose its way. Your webpage, however, will try to make sense of the error, and the result will be the upper table trying to merge with the lower table.

Take a look at this example on my website. It's constructed with two tables, but like in the scenario above, I've neglected to include the closing </table> tag for the first table.

http://www.cogonline.net/forums/invalid.php

Did you click the link at the bottom of that page? What did you notice when you ran that page through the Validator? Well, you probably noticed that there were 10 errors on the page. But the only thing I did wrong on that page was leave out one closing tag. Now click here to see that exact same code again, only with the missing </table> tag in place.

http://www.cogonline.net/forums/valid.php

Now what did you notice when you validated the page? It went through just fine, didn't it? I only fixed the one mistake. One mistake. Ten errors.

Now this is the part you'll need to wrap your head around. Go back and look at invalid.php's validation results again. Since the closing </table> tag wasn't there, the Validator could only assume it was going to show up at the proper place. When it didn't, it branded the very next HTML tag it found as incorrect. The <br /> tag. What you'll need to learn to do when looking for errors on your pages is, to not only start with the first error, but to look above that error and see what is actually missing or incorrect. Errors cascade, so the Validator simply marked the place where the code stopped making sense. In my case, I didn't include code that should have been there, so I had to use my noggin' to figure out what was wrong in the lines above it. This would have required some searching on my part if I had a lot more code than in this example.

If errors cascade, then that has ramifications with templates that repeat themselves on a forum page. If one error in a simple template like mine caused ten errors in the Validator, imagine what a similar error in forumhome_forumbit_level1_nopost would cause! That template is used repeatedly on your forum home pages. So not only is the error going to cascade, but its going to be compounded each time the template is used. Meaning even more cascades and more errors.

This is why you don't need to panic when you see 600+ errors on your forum. You may have to fix one problem, you may have to fix twenty. But because errors cascade, each time you address a problem, you just may find you've fixed a dozen or more. You should always start with the uppermost error and work your way down. This will ensure you don't work on something that isn't actually incorrect and wind up spinning your wheels on nothing at all.

OMITTAG NO? REFC delimiter? WTF?
Okay, so you you've probably come to the realization that you're probably going to have to learn a little HTML to correct some of your problems. Don't sweat it. HTML is the easier to learn of all forms of coding. In fact, W3CSchools has excellent, bare bones tutorials that will help you grasp all you need to know. Also, just use Google or your favorite search engine to find hundreds, if not thousands of guides and tutorials on the subject. In general, anyone running a vBulletin, even just for fun, should learn the basics of HTML. It will make life so much easier for them.

But what about this other stuff like OMITTAG NO and REFC delimiter and whatnot? Well, in most cases you're going to run into very common mistakes in HTML code. You've installed some modifications. You've downloaded some free custom styles. Or you paid some guy to make you a style for $20. Which means, you've set yourself up for some human error. A lot of developers write their code, but don't bother to check to see if it validates. So you may run into typos, errors, exclusions or just things the developer simply didn't know about.

For instance:
  • Ampersands (&) should always be written as their HTML equivalent (&amp;). We call that an ampersand command and it can create problems if not used when including them in links in pages.
    HTML Code:
    INCORRECT: 
http://www.google.com/search?sourceid=chrome&ie=UTF-8&q=star+wars

CORRECT: 
http://www.google.com/search?sourceid=chrome&amp;ie=UTF-8&amp;q=star+wars
  • Since HTML attributes use a lot of special characters like "" marks or single quotes ' or brackets <>, you should be using their ampersand command when they're part of text and not specifically being used as HTML code:

    Miranda said: "Are you going to stay on the computer all night, Mark?" <sigh>
    HTML Code:
    <span style="color:red">Miranda said: &quot;Are you going to stay on the computer all night, Mark?&quot; &lt;sigh&gt; </span>
  • <img> tags should always be self closing. They don't have an opening and closing tag like the table tags we were looking at above. And they should always include an alt="" attribute, even if it's empty.
    HTML Code:
    <img src="images/forum_new.png" alt="" border="0" />
  • Line breaks should also be self closing, not missing that ending slash.
    HTML Code:
    INCORRECT: <br>
CORRECT: <br />
  • With the notable exception of your DOCTYPE, you shouldn't capitalize HTML code. (This is a common mistake, as a LOT of tutorials, especially older ones, use capital letters in their sample codes.)
    HTML Code:
    <SPAN>This is wrong!</SPAN>
<span>This is right!</span>
  • Elements should be nested correctly. That means, you can't close one, before you've closed another that initially opened inside of it. In other words, they can't overlap:
    HTML Code:
    <i><b>This is wrong!</i></b>
<i><b>This is right!</b></i>

But Wait! There's Less!
I can't give you a full list of everything that can go wrong, but this should help a lot in getting you started. Also, the rules change a bit when you decide to use a different DOCTYPE, say one that has a more strict standard for HTML. There's also rules when dealing with more complex code like the <OBJECT> code for videos, or when including JavaScript code on a page. You can also validate your CSS, another aspect of web building goodie you should really read up on. It's also pretty easy to learn. But all that's for another tutorial. And you can find plenty more about any errors you may run into on the web. That's pretty much where I learned it, and where I continue to pick up new information.

[IMGLFT]http://www.w3.org/Icons/valid-xhtml10[/IMGLFT]Once you get your shiny new web pages all transition-y and error free, the Validator will offer you some HTML code to put on your website for bragging rights. The code will put a badge on your page saying which version of HTML your site validates against, along with linking the image to the Validator. The link will automatically run the Validator using the referring URI, so if you put this code in your footer, people will be able to check your individual pages at a glance.

In fact, I took this code and tweaked it a bit to help me validate my own web pages when I wasn't using Direct Input:

HTML Code:
<if condition="$bbuserinfo[userid] == X"><div class="thead" style="float:left"><a href="http://validator.w3.org/check?uri=referer" target="_blank">Validate</a></div></if>
I put this code at the very top of my header template, where X is my User ID. This puts an unobtrusive bar across the top of your web page that uses the same referrer link, so you can check your pages at a glance. The <if> conditional means only you'll ever see it. Again, this only uses the referring URI and not Direct Input.

Here's some additional resources that may also help you on your journey. HAPPY vBULLETIN-EN-EN-ING...er, or something. What did I tell you about writing in all CAPS?

Common XHTML Errors
Common HTML Validation Problems
10 Common Validation Errors and How to Fix Them
Embedding Flash While Supporting Standards
WAVE - Web Accessibility Evaluation Tool
Help and FAQ for the Markup Validator
Reply With Quote
  #12  
Old 01-07-2011, 05:49 PM
Drago13's Avatar
Drago13 Drago13 is offline
 
Join Date: Mar 2009
Location: Fernandina Bch Fla.
Posts: 48
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default
very informative, gonna try this tonight... Thanks DJ..
Reply With Quote
  #13  
Old 01-13-2011, 04:15 PM
fluidswork's Avatar
fluidswork fluidswork is offline
 
Join Date: Apr 2010
Location: India
Posts: 143
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default
Really great source of information ... but still this is little bit advance for noobs .......
Reply With Quote
  #14  
Old 01-13-2011, 09:31 PM
Digital Jedi's Avatar
Digital Jedi Digital Jedi is offline
 
Join Date: Oct 2006
Location: PopCulturalReferenceLand
Posts: 5,171
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default
Indeed it is a little more advanced. But the one thing beginners still want is for their website to function and operate properly. Aside from the fact that I don't see a lot of info out there for validating vBulletin specifically, I also don't see any info for new admins who are just beginning to understand how much work a well run site actually is. This article acknowledges that your going to have to learn something new, but at the same time, I assume in the admin's favor. Meaning, I try not to talk down to them, as if I understand this great mystery they never will. But I try to clarify technical info that I feel is easy to understand, once you grasp the basics. I try to make people feel a little less lost and a little more confident about administration.
Reply With Quote
  #15  
Old 01-16-2011, 07:33 PM
TheKdd TheKdd is offline
 
Join Date: Oct 2008
Posts: 55
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default
Somewhat a n00b here but can get around alright. My problem is with Google Adsense on my site, it is reporting errors with the pubid having an & - I use Advanced Google Adsense and can't find where to fix this error since it inserts my ads automatically straight from Google itself. Here is the error:

&securitytoken=guest" method="post" onsu…

Where do I go to fix this, or is it something I need to just ignore since it's in the Google Ad itself?
Reply With Quote
  #16  
Old 01-16-2011, 10:11 PM
Digital Jedi's Avatar
Digital Jedi Digital Jedi is offline
 
Join Date: Oct 2006
Location: PopCulturalReferenceLand
Posts: 5,171
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default
It might be just in the ad and inaccessible to you. I've not worked with Google AdSense before, so I don't know what the code looks like. But I would check where you've put the code in your templates. If you see any ampersands that need to be replaced, I would go ahead and try to correct them.
Reply With Quote
  #17  
Old 05-25-2011, 04:35 AM
Gamelobby's Avatar
Gamelobby Gamelobby is offline
 
Join Date: Jul 2007
Location: Long Beach, CA
Posts: 997
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default
I have tried to wrap my head around this, but just can not seem to grasp it.

I check, i see the errors, i sometimes can find the right template, but then thats about it.
Code:
http://www.gamelobby.com/Forum/admincp/index.php
1. If the error is to replace "&" with "&amp;" i can never find a lone "&" sign.
(And yes i check all the way down to the next section, not just that line)


2. If the error is:
Quote:
Line 966, Column 6: end tag for "ol" omitted, but OMITTAG NO was specified
</div>
✉
You may have neglected to close an element, or perhaps you meant to "self-close" an element, that is, ending it with "/>" instead of ">".
I never can find the end tag that is missing. Even tho the very next error says:
Quote:
Line 485, Column 2: start tag was here
<ol id="c_cat202" class="childforum">
But when i go to line 485 there is just a </div> tag, not an incomplete ol tag.


And so on & so on, etc, etc...


Gives me a monster headache. lol
Reply With Quote
  #18  
Old 07-29-2011, 07:58 AM
8thos's Avatar
8thos 8thos is offline
 
Join Date: Aug 2010
Location: Pensacola, FL
Posts: 772
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default
I really needed this article! Thanks.
Reply With Quote
Благодарность от:
Digital Jedi
  #19  
Old 08-10-2011, 11:56 AM
Juggernaut Juggernaut is offline
 
Join Date: Dec 2009
Location: California
Posts: 589
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default
I've fixed the XHTML errors in my arcade, forum home page and portal. The threads still require more work for me.
The postbit is mostly finished, thanks for this great article.
Reply With Quote
Благодарность от:
Digital Jedi
  #20  
Old 09-07-2011, 05:23 AM
Digital Jedi's Avatar
Digital Jedi Digital Jedi is offline
 
Join Date: Oct 2006
Location: PopCulturalReferenceLand
Posts: 5,171
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default
Hey Gamelobby,

I know I've been away for a while, and you may have already addressed this or given up, but if it helps, like I said in the article, you may need to look above the area where the error is listed. The validator doesn't pinpoint the location of the error until after it starts noticing there's something wrong. So, generally speaking, you'd want to look above the line where the tag is marked as an error. The error could even start wherever the tag opened, a good chunk of code along the way.

As for ampersands, if you're not finding the ampersand in the templates, take another look at the Source Code the validator puts out to see if maybe the ampersand is being generated by a modification, or a variable that needs editing. Sometimes, it's not in the templates.
Reply With Quote
  #21  
Old 09-23-2011, 06:13 PM
doctorsexy's Avatar
doctorsexy doctorsexy is offline
 
Join Date: Mar 2011
Location: earth
Posts: 383
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default
Can anyone point me in the right direction to sort this out..please

Line 818, Column 74: end tag for "ul" which is not finished
<ul class="list_no_decoration widget_list" id="widgetlist_column7"></ul>
Reply With Quote
Reply
Page 2 of 3 1 2 3

« Previous Thread | Next Thread »

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Forum Jump


All times are GMT. The time now is 09:10 AM.

Contact Us - Archive - Top

Powered by vBulletin® Version 3.8.12 by vBS
Copyright ©2000 - 2024, vBulletin Solutions Inc.
X vBulletin 3.8.12 by vBS Debug Information
  • Page Generation 0.04986 seconds
  • Memory Usage 2,376KB
  • Queries Executed 26 (?)
More Information
Template Usage:
  • (1)SHOWTHREAD
  • (1)ad_footer_end
  • (1)ad_footer_start
  • (1)ad_header_end
  • (1)ad_header_logo
  • (1)ad_navbar_below
  • (1)ad_showthread_beforeqr
  • (1)bbcode_code
  • (11)bbcode_html
  • (2)bbcode_quote
  • (1)footer
  • (1)forumjump
  • (1)forumrules
  • (1)gobutton
  • (1)header
  • (1)headinclude
  • (1)modsystem_article
  • (1)navbar
  • (4)navbar_link
  • (120)option
  • (1)pagenav
  • (1)pagenav_curpage
  • (2)pagenav_pagelink
  • (11)post_thanks_box
  • (3)post_thanks_box_bit
  • (11)post_thanks_button
  • (1)post_thanks_javascript
  • (1)post_thanks_navbar_search
  • (3)post_thanks_postbit
  • (11)post_thanks_postbit_info
  • (10)postbit
  • (11)postbit_onlinestatus
  • (11)postbit_wrapper
  • (1)spacer_close
  • (1)spacer_open
  • (1)tagbit_wrapper 
Phrase Groups Available:
  • global
  • inlinemod
  • postbit
  • posting
  • reputationlevel
  • showthread
Included Files:
  • ./showthread.php
  • ./global.php
  • ./includes/init.php
  • ./includes/class_core.php
  • ./includes/config.php
  • ./includes/functions.php
  • ./includes/class_hook.php
  • ./includes/modsystem_functions.php
  • ./includes/functions_bigthree.php
  • ./includes/class_postbit.php
  • ./includes/class_bbcode.php
  • ./includes/functions_reputation.php
  • ./includes/functions_post_thanks.php 
Hooks Called:
  • init_startup
  • init_startup_session_setup_start
  • init_startup_session_setup_complete
  • cache_permissions
  • fetch_threadinfo_query
  • fetch_threadinfo
  • fetch_foruminfo
  • style_fetch
  • cache_templates
  • global_start
  • parse_templates
  • global_setup_complete
  • showthread_start
  • showthread_getinfo
  • forumjump
  • showthread_post_start
  • showthread_query_postids
  • showthread_query
  • bbcode_fetch_tags
  • bbcode_create
  • showthread_postbit_create
  • postbit_factory
  • postbit_display_start
  • post_thanks_function_post_thanks_off_start
  • post_thanks_function_post_thanks_off_end
  • post_thanks_function_fetch_thanks_start
  • fetch_musername
  • post_thanks_function_fetch_thanks_end
  • post_thanks_function_thanked_already_start
  • post_thanks_function_thanked_already_end
  • post_thanks_function_fetch_thanks_bit_start
  • post_thanks_function_show_thanks_date_start
  • post_thanks_function_show_thanks_date_end
  • post_thanks_function_fetch_thanks_bit_end
  • post_thanks_function_fetch_post_thanks_template_start
  • post_thanks_function_fetch_post_thanks_template_end
  • postbit_imicons
  • bbcode_parse_start
  • bbcode_parse_complete_precache
  • bbcode_parse_complete
  • postbit_display_complete
  • post_thanks_function_can_thank_this_post_start
  • pagenav_page
  • pagenav_complete
  • tag_fetchbit_complete
  • forumrules
  • navbits
  • navbits_complete
  • showthread_complete