Question

I’m using Jquery Mobile and am trying to drop a form inside a JQM listview.

HTML like so:

<ul data-role="listview" data-inset="true" class="logList inputList">
   <li data-icon="false" class="inField">
     <a class="inField ui-corner-top" tabindex="-1">
        <label for="loginName">Benutzer</label>
        <input type="text" name="loginName" id="loginName" />
     </a>
   </li>
   ...

The problem is validation throws an error which says I cannot put a label or input element inside a a element. I don’t really need the a elements, except omitting them will break my Jquery Mobile listview enhancement.

Any idea how to work around this? There has to be a better way to inserting all JQM elements by hand and swapping a with spans

Thanks for help!

Answer 1

jQM offers this functionality already:

• http://jquerymobile.com/demos/1.0/docs/lists/lists-forms.html

Example:

<form>
    <ul data-role="listview">
        <li data-role="fieldcontain">
            <label for="name">Text Input:</label>
            <input type="text" name="name" id="name" value=""  />
        </li>
    </ul>
</form>