macek/jquery-serialize-object

Allow dashes in element names

billdami opened this issue ยท 5 comments

Currently the function excludes any elements in the form that contain a dash in the name attribute, however using dashes are completely valid according the the W3C spec.

To include elements with dashed names in the returned object, I just updated the patterns.validate, patterns.key, and patterns.named regular expressions to include a dash in their character sets resulting in the following:

patterns = {
    validate: /^[a-zA-Z][a-zA-Z0-9_-]*(?:\[(?:\d*|[a-zA-Z0-9_]+)\])*$/,
    key: /[a-zA-Z0-9_-]+|(?=\[\])/g,
    push: /^$/,
    fixed: /^\d+$/,
    named: /^[a-zA-Z0-9_-]+$/
};

Thanks for submitting this bug.

I'm going to build some unit tests to ensure functionality of the plugin first, then I'll do an iteration that closes out this issue for 2.1

Likewise, for allowing dots in element names. Swapping out the dashes in the regex above with dots seems to do the trick.

๐Ÿ‘

Any progress on this? I just applied this "patch" to my forked version and have been using it on some heavily nested complex form items with no hiccups :)

Hey everyone,

I've made some improvements to the plugin over the last couple of days.

For now, I think I'm going to leave the regexp patterns the way they are, but I've exposed them so you can customize them in your own apps. This pleases everyone because you can hack them up to have the plugin behave however you like.

I've made this decision to keep it easy to access the object returned from the plugin. For example

<input name="foo" value="a">

allows us to access the serialized object as obj.foo. Whereas

<input name="foo-bar" value="a">

would require us to use obj["foo-bar"] which is significantly less ideal.

For those looking for the simple addition of hyphens (-), I've provided an example in the API documentation.

I'll also paste the API amendment here


FormSerializer.patterns โ€” modify the patterns used to match field
names

Many of you have requested to allow - in field names or use . to nest keys.
You can now configure these to your heart's content.

// example: allow hyphen in keys
$.extend(FormSerializer.patterns, {
  validate: /^[a-z][a-z0-9_-]*(?:\[(?:\d*|[a-z0-9_-]+)\])*$/i,
  key:      /[a-z0-9_-]+|(?=\[\])/gi,
  named:    /^[a-z0-9_-]+$/i
});

Validating and Key parsing

  • validate โ€” only valid input names will be serialized; invalid names
    will be skipped
  • key โ€” this pattern parses all "keys" from the input name; You will
    want to use /g as a modifier with this regexp.

Key styles

  • push โ€” pushe a value to an array

    <input name="foo[]" value="a">
    <input name="foo[]" value="b">
    $("form").serializeObject();
    //=> {foo: [a, b]}
  • fixed โ€” add a value to an array at a specified index

    <input name="foo[2]" value="a">
    <input name="foo[4]" value="b">
    $("form").serializeObject();
    //=> {foo: [, , "a", , "b"]}
  • named โ€” adds a value to the specified key

    <input name="foo[bar]" value="a">
    <input name="foo[bof]" value="b">
    <input name="hello" value="world">
    $("form").serializeObject();
    //=> {foo: {bar: "a", bof: "b"}, hello: "world"}

If anyone needs additional support, I will be happy to help out.