Question

I’m using Jquery Mobile for an application, which has a login popup on every page. The problem is, Jquery Mobile will always have at least 2 pages in the DOM, so I will have two popups and login forms in the DOm, forcing me to find a way to avoid duplicate id-attributes.

I worked around this by omitting the id attributes on the login form inputs, so I’m doing this:

 <label for="email" class="inFieldLabel">#tx_email#</label>
 <input autocomplete="off" type="email" name="email" value="#XMLFormat( lostPass.email )#" class="required">

Which works fine visually, but produces a validation error, because:

 The for attribute of the label element must refer to a form control.

Question:
Is there a way to pass validation without using an id attribute? What would be workarounds?

Note: I can’t use a global login popup, because this is not supported by Jquery Mobile at the moment, so I’m stuck with a popup on every page.

Thanks for insights!

Answer 1

Put the form control the label applies to inside the label.

<label> text <input> </label>