Drag N’ Validate

Ever find yourself debugging XHTML via your browser’s View Source command? I do it all the time. You know the routine:

  1. You add a module somewhere on the page and it’s borking your layout.
  2. You hit View Source.
  3. You drag-select the module in question, paste it into a Stickie Note, manually indent your tag tree with tabs, and then find out where your tags are unbalanced.

It’s a pain in the ass and maybe there’s a better way to do it, but here’s a tool I’d love to see:

Drag N’ Validate (or Dragon Validate) — Drag select a block of XHTML in any application, right click to pull up a contextual “Validate” menu, and the application will autotab the block for you and point out any validation errors.

That would be money.

42 comments on “Drag N’ Validate”. Leave your own?
  1. Chad Edge says:

    on it. I’d love to see something like this as well.

    how about a contextual menu for launching textmate and then running a bundle?

    probably applescript could do it :)

    Let’s see how far I get. pretty much guarantee someone that reads your blog that’s *not* hopped up on pain medication (broken arm, torn tendon, missing teeth) will get it done faster, but I’ll give it my best :)

  2. Tom Richards says:

    Since it looks like you’re using Safari, try this:


    It doesn’t do exactly what you’re looking for, but it does validate the page automatically, and then adds a nice little table at the bottom of your “View Source” window that gives the line number, column number, type of problem (warning or error) and finally info on the error.

  3. Mike D. says:

    Chad: Nice. Also, to any readers who *are* on pain medication (the good kind) and have any left over, e-mail me.

    Tom: Yeah, I’ve tried Safari Tidy, but my problem is that I’m generally only interested in a snippet. My response to most validators is basically “yes, mofo, I *know* our ad server puts a million ampersands in the page… just show me the real errors please.”

  4. Mike Rundle says:

    Fuck validation man, if it works in IE5 then that’s all I care about! Boo ya bitches!

  5. Dale Cruse says:

    IE5?! Listen up, FutureBoy, I say that Lynx is here to stay!

  6. Jeff Croft says:

    Not quite as good, but if you paste that code into TextMate instead of a sticky note you’ll get the indenting and validation almost for free. :)

  7. Tom says:

    The Firefox View Source Chart Plugin (aka View Rendered Source) is a quick way to see where your tags are unbalanced, because it color codes them and draws boxes around them.

    This is one of the plugins I can’t live without. If your unbalancing happens over a large portion of the screen (ie you have to scroll between the start/end tags) you can simply click on any of the boxes inside the tags you’re interested in and it will collapse them.

  8. Baxter says:

    Does ANYONE care about ampersands, really?

    Can anyone clearly and succinctly tell me how they could cause harm.

    I usually try to correct them, where possible, just cause I LIKE things to validate, but I always feel stupid for spending the time worrying about them.

    Mike, great idea!

  9. Before I get into the tool I use, let me preface this by stating that I write my XHTML by hand, and by hand only. I used notepad to learn, and moved on to Homesite for the features. That being said, I use a feature in Dreamweaver to help visually validate and format XHTML. There’s an option that will perform all the indentation and such to a highlighted snippet or the whole document. Additionally, unclosed elements appear in highlighted yellow in design view.

  10. Markus says:

    @Thomas – What is that feature in Dreamweaver called?

    I second the View Source Chart Plugin that Tom mentioned – great tool.

  11. Bramus! says:

    The firefox Web Developer toolbar provides the option to submit the URL to the W3C validator (SHIFT+CTRL/CMD+H), or upload the current HTML source (SHIFT+CTRL/CMD+A).

    Given that second option, it should not be that hard for any Firefox extension developer to write something like:
    – get source of current selection, or get current selected source (if in source view).
    – paste that source in an empty XHTML template (with head in place, and empty body).
    – submit that code to the W3C validator.

    Shouldn’t be that hard …

    Or one could write a page with an input field where you can paste the code in … heck, as I’m typing this I better start off coding …

    And yes, the results are in: “MikeValidator – Quick ‘n Dirty” for demo over at http://www.bram.us/mikevalidator/ ;)


  12. Tom von S. says:

    I usually open up a vim window, paste in the snippet and type ‘gg=G’ to re-indent everything. Thats:

    gg – move cursor to top of the file
    = – start auto-indenting
    G – all the way to the bottom of the file

    Back when I was but a foolish newb I would type ‘ggVG=’. HAH!


  13. Bramus! says:

    And about the tabbing … Dreamweaver has this nifty option named “Apply Source Code Formatting”, but it does not have a shortcut unfortunately.

    The Zend IDE also provides this option; the shortcut is SHIFT+CTRL+F and it has become one of my favorites :)

  14. Rob L. says:

    @Markus: what Bramus said, plus there’s an “Apply Source Formatting to Selection” if you want to affect a selection only.

    @Bramus, it’s really easy to assign keyboard shortcuts in Dreamweaver to features that don’t have them. I’ve got Apply Source Formatting at Cmd+Shift+F…

  15. @Markus: just to reiterate, and as a personal response, it’s the “apply source formatting…” option. I know it’s been mentioned a few times, but I felt compelled to respond personally. Apologies for not specifying it by name in the first place.

  16. Don says:

    Yep, what Tom said. Use firefox plug in. Does it for you.

  17. Todd Huss says:

    I generally shoot to have my pages completely validate now. It’s been great now that QA can just validate a page to make sure it’s well formed and if they get green it’s a go on that front.

    The way we deal with ad server or 3rd party code is to put it in script tags and put the javascript within comments within the script tag so that the validator ignores it.

    For example if you take a look at this page that we did, we used that approach to get it to validate and there’s some nasty javascript on it from our ad server and analytics software:


    We still have a lot of non-validating pages but as we work on them, one by one we’re getting them to validate. Eventually I want page validation to be part of our continuous integration builds.

  18. Mike, I use the tidy service to do this. Install the TidyService from here http://www.pixelfreak.net/tidy_service/readme.html and then create a TidyService.conf file with the following attributes

    indent: yes
    doctype: omit
    indent-spaces: 2
    wrap: 72
    markup: yes
    tidy-mark: no
    output-xhtml: yes
    input-xml: no
    show-warnings: yes
    numeric-entities: yes
    quote-marks: yes
    quote-nbsp: yes
    quote-ampersand: no
    break-before-br: no
    uppercase-tags: no
    uppercase-attributes: no
    show-body-only: yes

    I think that show-body-only and output-xhtml are the important ones. Now you can select a section of code, and in apps that support services you then select Tidy Markup from the services menu. Errors are dumped to the console.

  19. One other note is that this combo works really well with Stand (which is what it looks like Mike is using in his screenshot) and its ability to apply changes in Safari’s source view.

    If you hate to have console open all the time like I do, you can use MKconsole to create a window overlay to display console logs on your desktop. It runs in a dockless/faceless mode as well.

  20. Adrian says:

    Hmm, really don’t have that problem to be honest.
    Generally try and make sure code is indented anyway, not always possible, and working with other people code can lead to different indentation styles.

    But then I have Notepad++ which I use these days as a text editor. Open some HTML in that, and you can collapse things like div’s, with some handy gutter bar indications as to where the start and end of a block is.
    So I can fairly quickly find problems where I’ve not clsoed a tag or soemthing.

    But then, I do use Windows…..

  21. Philipp Daun says:

    @Bramus: Although the code formatting feature in ZendStudio is quite nice, it won’t help you auto-indent XHTML code, especially not when working with templates in other applications.

  22. Brett Mitchell says:

    In response to Baxter, regarding why it’s important to encode ampersands…

    Let’s say you have an application that sends e-mail to your friends. You want to e-mail Joe, so your PHP coding creates the link to Joe below:


    Well, what happens when they want to copy someone in on the e-mail? You say, oh, well, I’ll just add a $_GET var ‘copy’.

    So you make the new generated link to:


    Looks good.

    Well, what happens when a browser processes that? The browser sees &copy and outputs a copyright sign. Look where the link below goes:

    Hover over this and check your status bar…

    Now that’s not a problem if you’re dealing with $_GET vars like id, or sess_id, and whatnot… but what if you mistakenly use &pound? You get £. How about &cent? You get ¢.

  23. james says:

    HTML Tidy plug in for Firefox http://users.skynet.be/mgueury/mozilla/

    Brings up a view source frame listed with all your errors and shows the line where the fault is, even explains it. Makes for easy and fast validation and code cleanup, Also stricter than w3c validation it seems.

    Finally, I am just going throw my flame starter in and say that you shouldn’t be using XHTML anyway when IE in no way supports it, use HTML 4.01 strict man!

  24. Dave S. says:

    I would just like the ability to hover over a closing tag and see the id/class of the associated element. Seems so simple. Some of these programs must do that.

  25. Ming Teo says:

    I would just like the ability to hover over a closing tag and see the id/class of the associated element. Seems so simple. Some of these programs must do that.

    The Web Developer Toolbar for Firefox does all that (albeit post-render, not within the code – I assume that’s what you meant by ‘closing tag’,) and more – with the function ‘Display Element Information’, you can view an object’s attributes, position, ancestors and children.

  26. Bramus! says:

    @ Philip Daun: totally correct, kinda “did not know” that it only indents the PHP code in a very nice way, and not the (X)HTML (been using Dreamweaver for this). Thanks for mentioning!

  27. Ty Hatch says:

    There’s always the Web Inspector if you’re running WebKit…

  28. ken says:

    Emacs (I know, I know, ctrl+alt+shift+tab is for contortionists, but it really is great for what you need) takes care of all this if you just turn on color coding.

  29. The Dawg says:

    Use the FireFox web developer plug in – it will do that for you and a lot more.

    One of my favorites is outlining tables on the rendered HTML – it helps to see which table is overflowing into which region.

    Very nice tool that’s hard to live without when working html.

  30. Jason says:

    If you just write perfect code the first time, you don’t need this tool! Come on people :) (LOL)

  31. ZenBug says:

    Get in the habit of adding a comment after every closing tag stating that it’s the end of the associated selector and your tags will never be unbalanced:

    Lorem ipsum…

  32. ZenBug says:

    Hey Mike – I don’t think the code tag is working in the comment editor. It’s not showing my code. I meant to include this example (formatted properly):

    Lorem ipsum…

  33. ZenBug says:


  34. Larry says:

    The ‘Format Source’ command in Frontpage helps a lot in debugging XHTML errors.

    Visual Studio 2005 also has good XHTML validation module. It will list a lot of warnings and errors. Double-click on the error message and it will take you right to the invalid tag or attribute.
    It even looks at the css files and will tell you if a particular style is non-conformant.

  35. Ty Hatch says:

    Um, why use Frontpage…? It’s been a rather worthless, bloated and buggy tool for too long to have much, if any, redeeming qualities as a serious web dev tool. It’s confusing even for beginners.

  36. Ian Hughes says:

    Visual Studio 2005 does have great XHTML validation, but it wants to apply it all the time everywhere. If you work in a hybrid environment of ASP.NET 2.0/ASP 3.0 and HTML 4.0/XHTML respectively, it seems to toss too many errors.

    It would awesome to select blocks of code and perform a simple check like that. Kind of like how word can spell check a section then ask me “do you want me to do the rest, dude?” That would rule.

    I know that most readers here are probably not using VS2005 but this sounds like something you could build as a plug in for that IDE.

  37. milo says:

    Interesting, with this post and its comments i learned more than in any other tutorial, keep on!

  38. Gary Ross says:

    Here’s a possibility

    First, create a base HTML document, that is missing the at the end, and keep it open in BBEdit or the editor of your choice.

    1. Then select your text

    2. Append the text into the document with Quicksilver (one key press if you set up a Trigger)

    3. Check the syntax (ignoring the error about missing

    Now the cool thing is that Quicksilver with remember the document you appended to, so if you trigger again then the document will be ready to open.

    If you set up a trigger (F5 say) you could the whole thing with:

    Select + F5 + QSTrigger + command-control-y(check syntax)

    Giving it a try with the text already selected the whole process takes about 2 seconds :-)

  39. Gary Ross says:

    That should read “that is missing the closing BODY and HTML tags at the end,…”

  40. Miriam Frost says:

    Bramus: awesome! I was just looking for exactly that. Thanks.

  41. […] Mike Davidson – Drag N’ ValidateMighty powerful dreams….never out of reach….ok fine, I have no idea what they’re talking about.  Leave me alone!  :p Filed under: News | […]

Leave a Reply

Your email address will not be published. Required fields are marked *

Subscribe by Email

... or use RSS