Detect support for HTML5 attribute

Question

How can I check whether a browser supports the HTML5 form attribute on input elements?

Following this question, I've tried the following:

var supportForm = function()
{
  var input = document.createElement("input");
  if ("form" in input)
  {
    input.setAttribute("form", "12345");

    if (input.form == "12345")
      return true;
  }

  return false;
}

... but that gives a false negative for FireFox (14, at least). Replacing input.form with input.getAttribute("form") gives a false positive for IE 9.

ordinarliy, I'd suggest Modernizr for this sort of thing, but it seems they haven't included a test for this one. Ho hum. — SDC, Oct 17 '12 at 13:44
If you do manage to get a working test, consider contributing it to Modernizr. :) — SDC, Oct 17 '12 at 13:49

score 6 · Accepted Answer · answered Oct 17 '12 at 14:58

6

For input elements there was a reference to the parent form before the HTML5 form reference feature and this causes this problem you mention.

I hope there is a more elegant way to check if it is supported but for now you could use the following (but it involves dealings with the DOM):

function testInputFormSupport() {
    var input = document.createElement('input'),
         form = document.createElement('form'),
         formId = 'test-input-form-reference-support';
    // Id of the remote form
    form.id = formId;
    // Add form and input to DOM
    document.childNodes[0].appendChild(form);
    document.childNodes[0].appendChild(input);
    // Add reference of form to input
    input.setAttribute('form', formId);
    // Check if reference exists
    var res = !(input.form == null);
    // Remove elements
    document.childNodes[0].removeChild(form);
    document.childNodes[0].removeChild(input);
    return res;
}

answered Oct 17 '12 at 14:58

Sev

1,982
1
16
27

Looks promising - it chimes with what @Gaby is saying in his answer. I'll give it a go, and let you know if it works. – Chowlett Oct 17 '12 at 15:21
Initial tests are good. Needs a full bout of testing (and IE doesn't like document.childNodes[0].appendChild, since childNodes[0] is the html tag; but we can work around that!), but definitely looking good so far. – Chowlett Oct 17 '12 at 16:25
I had `body` in the place of `childNodes[0]`, it may help. – Sev Oct 17 '12 at 16:51
Not perfectly; IE complains `Unable to get value of the property 'removeChild': object is null or undefined` when executed in the head, but succeeds if run later. In my case (Rails, which likes to include all JS in a big minified wodge), I can get around this using jQuery (not sure why); I suspect the general solution would be to ensure you invoke the test function after document ready. However, otherwise this is golden! – Chowlett Oct 18 '12 at 12:18
You're right it should be called after DOM is initialized, using `window.onload` or something similar. – Sev Oct 18 '12 at 12:38

score 0 · Answer 2 · answered Oct 17 '12 at 13:34

0

I do not think it is that easy.

According to the specs at http://dev.w3.org/html5/spec/association-of-controls-and-forms.html#attr-fae-form

The form owner must exist in order to be set to an element.
The element must be in the document in order to alter its form owner

answered Oct 17 '12 at 13:34

Gabriele Petrioli

191,379
34
261
317

Aha. But this suggests a way forward. Could I add a form to the document, add a `hidden` `input` after it, and try to change the `form` attribute of that element? Then clean down afterwards? – Chowlett Oct 17 '12 at 13:49

Detect support for HTML5 attribute

2 Answers2