[SOLVED] How to make jQuery Mobile attributes XHTML-valid

How to make jQuery Mobile attributes XHTML-valid

I started using jQuery Mobile some time ago, and as those that know jQuery Mobile know, it uses it's own HTML attributes to give items a predefined role. Mostly divs. Some examples:

<div data-role="page" id="trackPage">
    <div data-role="header">
        ...
    </div><!-- /header -->
    <div data-role="content" id="content_init">
        <form action="DoTrack" method="post" id="track_form" data-ajax="false">
            <div data-role="fieldcontain" id="div_trackselect">
                <fieldset data-role="controlgroup" data-type="horizontal">
                    ....
                </fieldset>
            </div>
        </form>
        ...
    </div>
    ...
</div>

As you can see, lots of jQuery attributes are added like data-role data-type data-ajax data-transition data-iconpos ...

Now, I prefer to use XHTML strict syntax, but when validating I got those errors: http://cl.ly/400Q080G3X2V3j3x2S00

I tried XHTML Transitional as well, but it gave the same errors.

I tried Googling to find a solution, but couldn't. I think to solve this, there should exist a DTD for all the jQuery Mobile attributes, right?

Is there another way to solve this problem?

Solution

The jQuery Mobile home page clearly states that it is:

A unified, HTML5-based user interface system for all popular mobile device platforms...

And for that reason, you should use the HTML5 doctype. This will ensure your page validates, if that's important to you.

<!DOCTYPE html>

Don't forget that you can still use XHTML-style syntax if you use the HTML5 doctype. Most people do, I think.

Incidentally, jQuery Mobile isn't making up its own attributes - they aren't "jQuery Mobile" attributes exactly - the data-* attribute system is part of HTML5 and exists so that you can attach arbitrary data to DOM nodes.