Zend framework forms and jQuery selectors - how to select by... ID?

Question

So I've got this issue with forms generated by Zend Framework.

As we know Zend is using this format for ID of HTML elements, i.e: contactDetails[name],contactDetails[email] etc.

First of all, why Zend is using invalid HTML to generate forms? There should be no brackets [] inside ids, according to W3C:

ID and NAME tokens must begin with a letter ([A-Za-z]) and may be followed by any number of letters, digits ([0-9]), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").

But the real issue I have is how to correctly select element by id using jQuery, if we must deal with invalid, Zend generated ids?

In standard JavaScript this seems to work: document.getElementById('contactDetails[email]').

But in jQuery: $('#contactDetails[email]') - this is obviously wrong, as brackets are reserved for attribute selectors.

The easy workaround I found is to wrap native-js-selected object in $() function: $(document.getElementById('contactDetails[email]')). Using this method I can use all jQuery functions on this object, but this seems like a hacky solution...?

Answer 1

Try escaping the square brackets:

$("#contactDetails\\[email\\]");

jQuery expects that those enclose attribute filter expressions. Scroll down to the end of this link:

http://docs.jquery.com/Selectors

From the above:

The full list of characters that need to be escaped: #;&,.+*~':"!^$=>|/