label conflict issue #3879

Closed
AndyFitzpatrick opened this Issue Mar 22, 2012 · 4 comments

Comments

Projects
None yet
5 participants
@AndyFitzpatrick

jQuery Mobile version 1.1.0-rc.1 throws javascript error, dom exception 8, and the page won't display when two labels on the same page reference the same checkbox. The page displays when using jQuery Mobile version 1.0.1.

@toddparker

This comment has been minimized.

Show comment
Hide comment
@toddparker

toddparker Mar 22, 2012

Contributor

The semantics of that aren't valid so this won't be supported. However, we shouldn't throw an error.

Contributor

toddparker commented Mar 22, 2012

The semantics of that aren't valid so this won't be supported. However, we shouldn't throw an error.

@adammessinger

This comment has been minimized.

Show comment
Hide comment
@adammessinger

adammessinger Mar 22, 2012

What do you mean by "won't be supported" -- just that jQM won't do anything special with a second label, or that a second label might actually cause problems?

As for semantic validity, multiple labels for a single form element is valid in both HTML4 and HTML5. HTML4 is more explicit about it:

The for attribute associates a label with another control explicitly: the value of the for attribute must be the same as the value of the id attribute of the associated control element. More than one LABEL may be associated with the same control by creating multiple references via the for attribute.

The HTML5 spec doesn't spell things out so clearly, but implicitly permits multiple labels with the following bit about control.labels:

control.labels
Returns a NodeList of all the label elements that the form control is associated with.

Labelable form-associated elements have a NodeList object associated with them that represents the list of label elements, in tree order, whose labeled control is the element in question. The labels IDL attribute of labelable form-associated elements, on getting, must return that NodeList object.

On a more pragmatic level, the popular jQuery validation plugin (which all of my current jQM app's client-side validation is built on) uses a second form label for its error messages.

What do you mean by "won't be supported" -- just that jQM won't do anything special with a second label, or that a second label might actually cause problems?

As for semantic validity, multiple labels for a single form element is valid in both HTML4 and HTML5. HTML4 is more explicit about it:

The for attribute associates a label with another control explicitly: the value of the for attribute must be the same as the value of the id attribute of the associated control element. More than one LABEL may be associated with the same control by creating multiple references via the for attribute.

The HTML5 spec doesn't spell things out so clearly, but implicitly permits multiple labels with the following bit about control.labels:

control.labels
Returns a NodeList of all the label elements that the form control is associated with.

Labelable form-associated elements have a NodeList object associated with them that represents the list of label elements, in tree order, whose labeled control is the element in question. The labels IDL attribute of labelable form-associated elements, on getting, must return that NodeList object.

On a more pragmatic level, the popular jQuery validation plugin (which all of my current jQM app's client-side validation is built on) uses a second form label for its error messages.

@toddparker

This comment has been minimized.

Show comment
Hide comment
@toddparker

toddparker Mar 22, 2012

Contributor

That is very interesting. Our issue is that we need to style the label of the form element as the clickable "button" so how do we decide which label to enhance into the control? I think we could add in some logic to simply ignore all but the first label associated with an element or some convention like that. At the very least, it shouldn't error out.

Contributor

toddparker commented Mar 22, 2012

That is very interesting. Our issue is that we need to style the label of the form element as the clickable "button" so how do we decide which label to enhance into the control? I think we could add in some logic to simply ignore all but the first label associated with an element or some convention like that. At the very least, it shouldn't error out.

@adammessinger

This comment has been minimized.

Show comment
Hide comment
@adammessinger

adammessinger Mar 22, 2012

Since a lot of what jQM does is built on markup conventions, giving button styling only to the first label seems like a reasonable approach to me. Thanks. :)

Since a lot of what jQM does is built on markup conventions, giving button styling only to the first label seems like a reasonable approach to me. Thanks. :)

@ghost ghost assigned Wilto Mar 22, 2012

@ghost ghost assigned jaspermdegroot Jul 19, 2012

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment