ansaurus

Question

Javascript: How do fix W3 Validation Error caused by &

Answer 1

+6 A:

There are a few things you can do.

You can enclose it within HTML comments:

<script type="text/javascript">
<!--

if (foo && bar) ...

//-->
</script>

You can enclose it in a CDATA section:

<script type="text/javascript">
// <![CDATA[

if (foo && bar) ...

// ]]>
</script>

You can include in in a file instead:

<script src="foobar.js" type="text/javascript"></script>

Greg 2009-09-27 10:41:43

+1 to using a JavaScript file. The other two options are a bit dated, use a modern DOCTYPE instead.

T.J. Crowder 2009-09-27 10:55:52

Make sure to comment out the HTML comment start. If E4X is enabled (`type` contains `;e4x=1`), the code inside would be a comment literal.

Eli Grey 2009-09-27 21:54:17

@TJ I've found some .js will crash if its not inline.. (i.e. googlemap v3)

Talvi Watia 2010-05-24 07:21:42

Answer 2

+2 A:

The primary answer is: Use JavaScript files for JavaScript, not HTML files, and use the src attribute of script tags. (Combine all your JS into one file, minimize, gzip, etc. for performance.)

But, you can embed JavaScript in HTML if absolutely necessary. Use a valid, modern DOCTYPE and you don't have to resort to comment tags and CDATA sections.

Valid HTML5 example:

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8">
<title>Example</title>
<script type='text/javascript'>
function foo() {
   var a = 1, b = 2;

   if (a && b) {
      alert("Both");
   }
   if (a < b) {
      alert("a < b");
   }
   if (a > b) {
      alert("a > b");
   }
}
</script>
</head>
<body>
<p>Hi there</p>
</body>
</html>

That will also validate as HTML4 strict if you change the doctype to

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"&gt;

Note that in both cases, you need to be careful about end tags in your script --

This causes the problem:

<script type='text/javascript'>
alert("</td>");
</script>

This solves the problem by prefacing the slash with a backslash (or you can break the end tag up into separate string literals):

<script type='text/javascript'>
alert("<\/td>");
// -or-
alert("<" + "/td>");
</script>

But again, the basic answer is: Don't embed JavaScript within HTML files when you can avoid it, use JavaScript files for that.

T.J. Crowder 2009-09-27 10:55:06

-1 without explanation or comment? Nice.

T.J. Crowder 2009-09-27 11:34:42

That is the correct answer. +1

2009-09-27 12:05:07

Answer 3

A:

Escape & with &, < with <, and > with >.

Eli Grey 2009-09-27 21:55:41

This works great in XHTML … but not HTML-compatible XHTML where it will just break.

David Dorward 2009-09-27 22:07:43

David, did you even test it in HTML? It works fine in HTML.

Eli Grey 2009-09-27 23:41:58

I don't need to test this trivial thing. It's a very basic part of the differences between HTML and XHTML. That said, here is a test case: http://dorward.me.uk/tmp/no-it-doesnt-work.html (it errors, as expected, in Firefox. I can't be bothered to test in other browsers).

David Dorward 2009-09-28 11:04:18

Your test case is inside the script tags where it does not need to be HTML encoded. However, inside the HTML (on a tag property), it most definitely does need to be encoded as with the example I gave above.

John Cavan 2009-09-28 14:13:06

If you mean "attribute value", then that is different. The question didn't specify if it was about attribute values or script elements. Script elements are more likely, as intrinsic event attributes tend to have simple function calls in them, so assuming they were what was being discussed was a reasonable assumption.

David Dorward 2009-09-28 15:43:54

Based on the original posting, I actually assumed it was on an attribute and not inside a script block. I'm not sure if Elijah made the same assumption, though he didn't say as much.

John Cavan 2009-09-28 18:02:24

Answer 4

A:

Based on your description, I suspect that you're talking about script that's inside an event property in an HTML tag (such as onclick). In that event, the script code needs to be HTML encoded. Elijah hit the nail on the head there.

For example:

<input type="submit" onclick="if(somevar &amp;&amp; othervar) callFunc(&quot;clicked&quot;);">

You do not need to do that inside a <script></script> block.

John Cavan 2009-09-28 00:02:43

hmm... Pushed down, not sure why. Whomever did that may want to read the standard, it most definitely applies to both HTML and XHTML. The same applies for URLs in anchor tags, etc. as well.

John Cavan 2009-09-28 03:04:46

ansaurus

tags:

views:

answers:

Javascript: How do fix W3 Validation Error caused by &

related questions