jQuery Templates - XHTML Validation

Posted by hajan on ASP.net Weblogs See other posts from ASP.net Weblogs or by hajan
Published on Thu, 16 Dec 2010 21:07:00 GMT Indexed on 2010/12/16 21:10 UTC
Read the original article Hit count: 600

Many developers have already asked me about this. How to make XHTML valid the web page which uses jQuery Templates.

Maybe you have already tried, and I don't know what are your results but here is my opinion regarding this.

By default, Visual Studio.NET adds the xhtml1-transitional.dtd schema

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

So, if you try to validate your page which has jQuery Templates against this schema, your page won't be XHTML valid. Why?

It's because when creating templates, we use HTML tags inside <script> ... </script> block. Yes, I know that the script block has type="text/html" but it's not supported in this schema, thus it's not valid.

Let's try validate the following code

Code

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

<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>jQuery Templates :: XHTML Validation</title>
    <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.4.4.min.js" type="text/javascript"></script>
    <script src="http://ajax.aspnetcdn.com/ajax/jquery.templates/beta1/jquery.tmpl.js" type="text/javascript"></script>
    
    <script language="javascript" type="text/javascript">
        $(function () {
            var attendees = [
                { Name: "Hajan", Surname: "Selmani", speaker: true, phones: [070555555, 071888999, 071222333] },
                { Name: "Denis", Surname: "Manski", phones: [070555555, 071222333] }
            ];

            $("#myTemplate").tmpl(attendees).appendTo("#attendeesList");
        });
    </script>

    <script id="myTemplate" type="text/html">
         <li>
            ${Name} ${Surname}
            {{if speaker}}
                (<font color="red">speaks</font>)
            {{else}}
                (attendee)
            {{/if}}
        </li>
    </script>
    
</head>
    <body>
    <ol id="attendeesList"></ol>
</body>
</html>

To validate it, go to http://validator.w3.org/#validate_by_input and copy paste the code rendered on client-side browser (it’s almost the same, only the template is rendered inside OL so LI tags are created for each item).

Press CHECK and you will get:

Result: 1 Errors, 2 warning(s) 

The error message says:


Validation Output: 1 Error

Error Line 21, Column 13: document type does not allow element "li" here

         <li>


Yes, the <li> HTML element is not allowed inside the <script>, so how to make it valid?


FIRST: Using <![CDATA][…]]>

The first thing that came in my mind was the CDATA. So, by wrapping any HTML tag which is in script blog, inside <![CDATA[ ........ ]]> it will make our code valid. However, the problem is that the template won't render since the template tags {} cannot get evaluated if they are inside CDATA.

Ok, lets try with another approach.


SECOND: HTML5 validation

Well, if we just remove the strikethrough part bellow of the !DOPCTYPE

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

our template is going to be checked as HTML5 and will be valid.

Ok, there is another approach I've also tried:


THIRD: Separate template to an external file

We can separate the template to external file. I didn’t show how to do this previously, so here is the example.

1. Add HTML file with name Template.html in your ASPX website.

2. Place your defined template there without <script> tag

Content inside Template.html

<li>
    ${Name} ${Surname}
    {{if speaker}}
        (<font color="red">speaks</font>)
    {{else}}
        (attendee)
    {{/if}}
</li>

3. Call the HTML file using $.get() jQuery ajax method and render the template with data using $.tmpl() function.

$.get("/Templates/Template.html", function (template) {
    $.tmpl(template, attendees).appendTo("#attendeesList");
});

So the complete code is:

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

<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>jQuery Templates :: XHTML Validation</title>
    <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.4.4.min.js" type="text/javascript"></script>
    <script src="http://ajax.aspnetcdn.com/ajax/jquery.templates/beta1/jquery.tmpl.js" type="text/javascript"></script>
    
    <script language="javascript" type="text/javascript">
        $(function () {
            var attendees = [
                { Name: "Hajan", Surname: "Selmani", speaker: true, phones: [070555555, 071888999, 071222333] },
                { Name: "Denis", Surname: "Manski", phones: [070555555, 071222333] }
            ];

            $.get("/Templates/Template.html", function (template) {
                $.tmpl(template, attendees).appendTo("#attendeesList");
            });
        });
    </script>
    
</head>
    <body>
    <ol id="attendeesList"></ol>
</body>
</html>

This document was successfully checked as XHTML 1.0 Transitional!

Result: Passed

If you have any additional methods for XHTML validation, you can share it :).

Thanks,
Hajan

© ASP.net Weblogs or respective owner

Related posts about ASP.NET

Related posts about jQuery