macek/jquery-serialize-object

Forms with dash ("-") in name doesn't serialize correctly

troygrosfield opened this issue · 3 comments

Forms don't serialize correctly when the form field has a dash ("-") in the name attribute:

Html

<form id="myForm">
  <input type="text" name="test" value="works">
  <input type="text" name="test-2" value="should work">
</form>

Actual output

> $('#myForm').serializeObject()
{
  'test': 'works'
}

Expected output

> $('#myForm').serializeObject()
{
  'test': 'works',
  'test-2': 'should work'
}
macek commented

Duplicate of #6.

At the very least, please read the README before posting an issue.

// modify validation pattern to allow hyphens
$.extend(FormSerializer.patterns, {
  validate: /^[a-z][a-z0-9_-]*(?:\[(?:\d*|[a-z0-9_-]+)\])*$/i,
  key:      /[a-z0-9_-]+|(?=\[\])/gi,
  named:    /^[a-z0-9_-]+$/i
});

$('#myForm').serializeObject(); // ...

If you have further trouble, let me know.

I did read the README apparently I missed the part I was looking for. However, why wouldn't this be the default behavior? In what circumstance would you not want to use a hyphen in the field name?

While it's nice to have the configuration, it seems overly complex to have to update the config above as you mentioned above just to include a hyphen. Why not have a setting for allowAllPatterns which allows every patten in the name attribute. Then if you want to further restrict, you could do as you mentioned above?

Something like:

FormSerializer.allowAllPatterns = true;

This would be a passive change (defaults to false, use defined patterns) and would settle a lot of cases where people are asking for extra characters.

Changes would be something along the lines of:

  var patterns = {
    validate: /^[a-z_][a-z0-9_]*(?:\[(?:\d*|[a-z0-9_]+)\])*$/i,
    key:      /[a-z0-9_]+|(?=\[\])/gi,
    push:     /^$/,
    fixed:    /^\d+$/,
    named:    /^[a-z0-9_]+$/i,
    allowAllPatterns: false
  };

...

function addPair(pair) {
  if (!patterns.allowAllPatterns && !patterns.validate.test(pair.name)) return this;
  var obj = makeObject(pair.name, encode(pair));
  data = helper.extend(true, data, obj);
  return this;
}

Passive change that makes the additional config of "use all form field names as-is" easier.

Thoughts?