Validation errors due to Javascript?

I recently hired a freelancer to validate all the code for my Wordpress e-commerce website (http://www.projectdisobey.com/disobeyclothing)

He told me that he had finished validating everything, but when I tested each page out using the validation service at http://validator.w3.org/, I came across a whole load of validation errors (http://www.projectdisobey.com/disobeyclothing/wp-content/uploads/2011/10/ValidationErrors.jpg). I notified the freelancer of this and his reply was:

“The errors left are because of javascript in the source code. The website http://validator.w3.org checks the source code of the page and gives errors on javascript because the checker is not for Javascript. It checks it as a html/css and gives errors.”

Since I am no expert in this field, can anybody tell me from glancing over the list of validation errors (http://www.projectdisobey.com/disobeyclothing/wp-content/uploads/2011/10/ValidationErrors.jpg) whether he is speaking the truth or not? If any of the errors have nothing to do with Javascript and are easy to resolve, would anybody mind advising me how to do so? I’d be extremely appreciative.

Thanks guys…

I only see one html error in the W3C validator. There are lots more CSS issues, some of them just because of the use of CSS3.

I couldn’t see your screen shots, though. Why not post them here? I clicked on them and just got directed to some sleazy poker website. (Someone needs to flush imageshack down the toilet.)

Try the link now. I uploaded the image to my own server.

Thanks for your help.

OK, most of those look extremely minor. In URLs it’s better to use & rather than &, and most of the notes refer to that. Yes, it does seem most of the errors relate to what the JS is outputting.

Thanks. Is there any way I can validate the Javascript? Is there a validator service that validates the CSS, HTML and Javascript together?

I just want to be sure all the coding is correct before I go live with the site.

Validation is really just a way of checking for potential problems. It usually doesn’t mean that the site won’t work, but rather that, from a purist point of view, some of the code is not as pure as possible.

The validator has flagged potential issues with the JS, so you don’t really need more than that. The next step would be to go and edit the JS files.

A bigger issue is the outdated document type that the site is using:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

That should only be used for sites from the 1990s, so why that gets used on new sites is beyond me. If you really want to validate your site, update that doctype (at the top of each page) to

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">

Then if you revalidate, you will get a much better sense of how well coded the site is. The transitional doctype was designed to help old, outdated sites survive on the web … until they got updated.

I changed the document type and unsurprisingly it brought up even more errors. To be honest, I am behind schedule already and don’t want to create any more unnecessary work for myself. I need to go live with the site as soon as possible. Is it that big of a deal if I stick the the document type I had originally?

My main concern is that my site works bug-free in all (or at least 95% ideally) browsers. As long as I can be confident of that, I am happy.

Is there anything in particular that I need to edit within the JS files?

No, it shouldn’t matter. The best thing to do is check your site in the main browsers, and if it’s working, you are good to go. As I said, validation only alerts you to possible problems, but browsers are pretty forgiving.

Is there anything in particular that I need to edit within the JS files?

From my quick look, the main thing to change would be to replace & with & in URLs.

I have tested it extensively in all the main browsers and I haven’t had any problems whatsoever, except some compatibility issues with IE (surprise, surprise).

I will edit the JS files accordingly. Thanks for your help!

That should only be used for sites from the 1990s, so why that gets used on new sites is beyond me.

It’s default for Wordpress, except some of the newer versions use the HTML5 doctype, which, if you’re validating with that, is almost as bad as the Tranny doctype.

The JavaScript validator can be found at http://jslint.com/

You just need to select “Assume a browser” when validating JavaScript that is to run in a web browser and leave all the other checkboxes empty.

I don’t understand why you would not just trust the guy you hired. Since the guy you hired is the expert in the field, and you are not, I am confused. You could ask him to explain these errors and the possible consequences of leaving them as is.

I hope your freelancer does not lurk these forums.

Why did your free lancer not just request permission for access to the JS files then fix the errors himself?

The site is still throwing up errors so here’s a rundown of the Home page and a Product page.

Home page: http://www.projectdisobey.com/disobeyclothing/

Errors: 1

Line 343, Column 16: end tag for element “div” which is not open

The tag in question - a stray duplicate of </div><!-- content #end –> - is the last element in the page and lies outside the html element. Remove it and the page will validate.

Also, hashes are used inappropriately in comments e.g. <!-- wrapper #end –>. # indicates an id. The standard comment format for indicating which element is being closed is <!-- #wrapper end –> (though the “end” is superfluous if the comment is next to a closing tag).

A product page: http://www.projectdisobey.com/disobeyclothing/?p=400

Errors: 16

These are mostly due to the Validator reading javascript as HTML. To prevent this, mark up script as CDATA by placing // <=!=[=C=D=A=T=A=[ after the opening script tag and // ]=]=> before the closing script tag. You’ll see that one script, beginning on line 54, already has this. i.e.

<script type="text/javascript">
// <=!=[=C=D=A=T=A=[
    var vvqflashvars = {};
    var vvqparams = { wmode: "opaque", allowfullscreen: "true", allowscriptaccess: "always" };
    var vvqattributes = {};
    var vvqexpressinstall = "http://www.projectdisobey.com/disobeyclothing/wp-content/plugins/vipers-video-quicktags/resources/expressinstall.swf";
// ]=]=>
</script>

This done, the remaining errors are…

Line 424, Column 48: required attribute “action” not specified.

Maybe your cart doesn’t need an action? To validate, you could try adding an empty attribute: action=“”.

Line 450, Column 28: document type does not allow element “style” here

           <style type="text/css">
    #info { width:547px !important; }
</style>

Remove the style element and put the #info rule in either an external stylesheet or the existing embedded sheet in the head.

Line 456, Column 38: document type does not allow element “span” here; assuming missing “li” start-tag

<span id=“tellafrnd_success_msg_span”></span> is inside a ul so should be within a li element i.e.

<li><span id="tellafrnd_success_msg_span"></span></li>

Line 455, Column 72: document type does not allow element “div” here; assuming missing “li” start-tag

This element is in the same ul as the span above. Again, wrap it in <li></li>

The above done, the document should validate – and hopefully still work – you did keep a copy, didn’t you? :slight_smile:

Thanks a lot Victorinox!

I followed your instructions and managed to fix every validation error on the site except for the one below.

I have no idea why an extra ‘</div><!-- content #end –>’ is being inserted after the closing ‘body’ and ‘html’ tags. Please see attachment.

Any suggestions as to what might be causing this?

I guess it’s being generated somewhere in the Wordpress theme. If you have a program that can search a directory of files for a text string (e.g. TextMate or TextWranger on Mac) then that may identify the culprit.

I see you have a separate thread for this, so let’s close this one out: