Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add typing to form fields #32

Open
awvalenti opened this issue Jan 21, 2012 · 8 comments
Open

Add typing to form fields #32

awvalenti opened this issue Jan 21, 2012 · 8 comments

Comments

@awvalenti
Copy link

Hello,

I'd like to contribute to form2js by implementing a way to specify field types on form inputs. This would avoid generating an object like { balance: "-1.50", active: "true" } where it should be { balance: -1.50, active: true }. I've searched the issues and pull requests, but found something similar only for the boolean type.

I'm working on a web framework project which would benefit a lot from form2js. I wrote something similar to it, but it's only capable of converting simple form stuff.

Up to this point, the ideias I came up with are the following:

  • Use the type attribute, like <input type="number">, instead of type="text". This is HTML5-like, and has the advantage of displaying a numerical keyboard on mobile devices, while degrading gracefully to type="text" on non-compatible browsers (as far as I know). However, it would break compatibility with type="hidden" and also seem strange on select elements, like <select type="number"> (Eclipse displays a warning when validating XHTML).
  • Add some string to the class attribute, like class="type-number" or "type-boolean". It's XHTML compatible and minimally intrusive.

This might eliminate the need for specifying value="on" or value="true" on boolean checkboxes, allowing the string "true" to be used where it actually means a string value.

Any ideas or comments?

Thank you!
André

@maxatwork
Copy link
Owner

Hello,

Great idea. I think we should use:

  • 'type' attribute (if it's 'number', 'date' etc) - for simplicity
  • 'data-type' if 'type' attribute is absent (like in selects) or
    value type cannot be figured out of 'type' attribute (like in hiddens,
    radios, checkboxes).

This conforms HTML5 standard and most browsers (IE6 too) can use it
(via getAttribute() or getAttributeNode() methods).

@awvalenti
Copy link
Author

"data-type" seems nice! I read some texts about adding custom attributes to HTML elements and I started using them on my framework project (on a different context). Using data-* is working fine for me. It doesn't interfere with existing attributes and should be officially supported in the near future.

I believe using always "data-type" (instead of sometimes "type") would be the best choice. type="number" renders differently on Firefox and Chrome. On Firefox (9, at least), it's the same as type="text". On Chrome, it displays up/down arrows so you can increment/decrement the number - not necessarily what the developer wants. The developer might not want to add HTML5 features to his/her site, and this would force him/her to do so.

It seems to me that using only "data-type" would be simpler, and also more consistent among all input types. The developer would still have the option of adding type="number" or "date" if he/she wants to, and this would not interfere on form2js.

What do you think?

@maxatwork
Copy link
Owner

I think "type" attribute should be considered also. We should figure data type from markup if we can, but probably, "data-type" attribute should have higher precendence than "type" (for more consistent interface).

@awvalenti
Copy link
Author

I agree with you. If data-type has higher precedence, the interface will surely be consistent enough :).

I thought about the type="date" thing you mentioned. The Date type exists only on JS, not on JSON. So, if one is using form2js to convert forms to JSON (instead of pure JavaScript objects), he/she might want to use some custom function to convert from date to string. So, maybe it would be nice also if it's made possible to do something like data-type="customBla" or something, which would then call the function customBla() to convert from the field string value to whatever the user likes. I know it's already possible to do something like that by passing arguments when calling the form2js function, but maybe it would be nicer if one could express that directly on the input element.

Maybe some convetion would make it fine, like that "custom" thing. This one doesn't seem quite good, but anyway it's just an example.

What do you think?

@maxatwork
Copy link
Owner

Great idea! I think we should also add a 'custom attribute' parameter
and check for all elements with such attribute on deserialization.

@marceloverdijk
Copy link

I bumped on this issue as I was wondering if form2js would support with data types.

I wonder what the status is of this issue and implementing it.

One thing I would to add is also the discussion of number formatting.
E.g I develop a Dutch site and there users will enter 12,95 for 12 euros and 95 cents. Note the , as decimal separator instead of . .

@xeoshow
Copy link

xeoshow commented Apr 7, 2012

Also would like to know the status of this issue since it is quite important for real production env ...
Thanks!

@sukazavr
Copy link

My solution:

            switch (value)
            {
                case 'null': value = null; break;
                case 'true': value = true; break;
                case 'false': value = false;
            }

            if (!isNaN(parseFloat(value)) && isFinite(value)) value = parseFloat(value);

Insert this code after line 93.

Realizes types of null, true, false, integer and float.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

5 participants