Support "W3C HTML JSON form submission" about jquery-serialize-object HOT 8 OPEN

Below is a summary of non-compliant behaviors. These are things that would need to be fixed in order to match the W3C standard.

To be clear, the list below is not how jquery-serialize-json current works.

Checkboxes should encode as true/false

<form enctype='application/json'>
  <input type='checkbox' name='shiny' checked>
</form>

should produce

{
    "shiny": true
}

If a path is repeated, its value is captured as an array

<form enctype='application/json'>
  <input type='number' name='bottle-on-wall' value='1'>
  <input type='number' name='bottle-on-wall' value='2'>
  <input type='number' name='bottle-on-wall' value='3'>
</form>

should produce

{
    "bottle-on-wall":   [1, 2, 3]
}

Keys can include any character

note usage of ! here

<form enctype='application/json'>
  <input name='wow[such][deep][3][much][power][!]' value='Amaze'>
</form>

should produce

{
    "wow":  {
        "such": {
            "deep": [
                null,
                null,
                null,
                {
                    "much": {
                        "power": {
                            "!":  "Amaze"
                        }
                    }
                }
            ]
        }
    }
}

Merge behavior

The algorithm does not lose data in that every piece of information ends up being submitted. But given the path syntax, it is possible to introduce clashes such that one may attempt to set an object, an array, and a scalar value on the same key.

• Trying to set multiple scalars on the same key will convert the value into an array.
• Trying to set a scalar value at a path that also contains an object will cause the scalar to be set on that object with the empty string key.
• Trying to set an array value at a path that also contains an object will cause the non-null values of that array to be set on the object using their array indices as keys.

<form enctype='application/json'>
  <input name='mix' value='scalar'>
  <input name='mix[0]' value='array 1'>
  <input name='mix[2]' value='array 2'>
  <input name='mix[key]' value='key key'>
  <input name='mix[car]' value='car key'>
</form>

should produce

{
    "mix":  {
        "":     "scalar",
        "0":    "array 1",
        "2":    "array 2",
        "key":  "key key",
        "car":  "car key"
    }
}

Invalid keys are kept as-is

<form enctype='application/json'>
  <input name='error[good]' value='BOOM!'>
  <input name='error[bad' value='BOOM BOOM!'>
</form>

produces

{
    "error": {
        "good":   "BOOM!"
    },
    "error[bad":  "BOOM BOOM!"
}

File Uploads

This is not an area jquery-serialize-json can really handle; not easily anyway. Supporting file uploads would be a major undertaking. If handled at all, this would be handled last. We'll see what tools/methods are available to us at the time of considering this functionality.

from jquery-serialize-object.

The W3C spec is not clear on a couple matters. This comment will detail those items.

How to treat a check box with a value attribute?

<form enctype='application/json'>
  <input type='checkbox' name='shiny' value='okay' checked>
</form>

I suspect we should encode this as

{
    "shiny": "okay"
}

instead of

{
    "shiny": true
}

How does foo[] work if mixed with other foo[n] inputs?

<form enctype='application/json'>
  <input name='foo[1]' value='hello'>
  <input name='foo[]' value='world'>
</form>

I suggest that foo[]-style names should encode as arr[arr.length] = value; Here's what that would look like

{
    "foo": [
        null,
        "hello",
        "world"
    ]
}

How should foo[][] be encoded?

<form enctype='application/json'>
  <input name='foo[][]' value='0'>
  <input name='foo[][]' value='1'>
  <input name='foo[][][]' value='2'>
  <input name='foo[][]' value='3'> <!-- no append/merge -->
</form>

Albeit a completely wacked input name, I suggest it is encoded like this

{
    "foo":
    [
        [
            0
        ],
        [
            1
        ],
        [
            [
                2
            ]
        ],
        [
            3
        ]
    ]
}

3 does not get appended to an auto-created array with 1. Despite the keys being the same (foo[][]), there's no way to look-up where the 1 is in the object and wrap both values in an array as [1, 3]

from jquery-serialize-object.

@macek I think that is the best explanation I've ever seen on Github ever why something "can't exist in a project right now".

from jquery-serialize-object.

@brandonb927 thanks for the comment. It may seem like a small plugin, but it's easy to overlook many of the details that need to be considered. I appreciate the feedback and concerns from everyone that's been active with this project's issues.

from jquery-serialize-object.

Reference: formic validator

from jquery-serialize-object.

This W3C spec seems to have been downgraded from a 'working draft' to a 'note' some time in the last month:

W3C HTML JSON form submission Working Draft (retrieved 5th September 2015)

W3C HTML JSON form submission Note (current)

Which now reads "Beware. This specification is no longer in active maintenance and the HTML Working Group does not intend to maintain it further.".

Shame really, it is a nice concept.

from jquery-serialize-object.

@zenlambda yeah it is a shame. I wonder what sort of trouble they ran into.

Thanks for sharing.

from jquery-serialize-object.

W3C HTML JSON form submission no longer maintained 😞

Not sure why this isn't being standardized...

from jquery-serialize-object.