Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    hgs
    hgs is offline
    New Coder
    Join Date
    Jan 2010
    Location
    Germany
    Posts
    83
    Thanks
    3
    Thanked 5 Times in 5 Posts

    Question on using the data-* attribute.

    I have a php source that generates a page with a form like in this example:

    Code:
     <form id=f1 name=f11 >
    <input type="text" name="i0" id="i0"  data-datatype='time'  size="4" value="g"><br>
    <input type="text" name="i1" id="i1"  data-datatype='date'  size="10" value="d"><br>
    <input type="text" id="f2" name="f2"  data-datatype='num'   value="ll"><hr>
    <input type="text" id="f3" name="f3"  data-datatype='email' value="ll@aaa.com"><hr>
    <input type="text" id="f4" name="f4"  value="ll@aaa.com"><hr>
    <input style="float:right;" type="submit"  data-submittype='update' id="new" name="new" value="save"><br>
    </form>
    Next I have a javascript function that iterates over the form fields
    and is attaching a validation function to the onchange event for the fields.

    This validation function, when called, is looking at the this.data-datatype value
    then performing the related validation.

    Next I want to extend the functionality in order to have some fields to be required, not empty,
    some fields should be converted to all upper case, some fields should only be in a certain range , etc ...

    Is it ok to use other data-* atributes to make it known to the validation function
    or is it better to have php generate some javascript configuration object ,
    to let the validation function know about all this ?

    To me it looks like the config object is the more flexible way to go as I don't have to touch any
    html when adding more functionality to the validation, just modifying the php config object generation


    But then , when will I use the data-* attribute and what for ?

    Regards
    My site
    If you’re doing software development right, you’re probably doing Agile wrong.
    -- Isaac Schlueter

  • #2
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,335
    Thanks
    11
    Thanked 588 Times in 569 Posts
    i would at least set the html type attribute to what you have as data-datatype, changing only num to number. there is also an html required attribute you should use to indicate required fields.

    feel free to use whatever data- attribs you want, that's what they are for.

    you can easily get that same object literal that you would echo in php:
    Code:
    JSON.stringify(inp.dataset)
    By using semantic html (type=date, required, etc) in addition to custom (non-universal) data- attribs , you provide better functionality to those without JavaScript and understandable constraints/instructions for accessibility technologies like screen readers. if you really care about those users, the pattern attribute on form inputs will allow them to validate and get instructions from the machine that CSS normally presents visually. the types you are using have built in validation patterns, but if you are doing something like a zip code for example, pattern can be of great use to the disabled.
    Last edited by rnd me; 08-09-2013 at 08:51 PM.
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/5/28) IE7:0.1, IE8:5.3, IE11:8.4, IE9:3.2, IE10:3.2, FF:18.2, CH:46, SF:7.9, NON-MOUSE:32%

  • Users who have thanked rnd me for this post:

    hgs (08-12-2013)

  • #3
    hgs
    hgs is offline
    New Coder
    Join Date
    Jan 2010
    Location
    Germany
    Posts
    83
    Thanks
    3
    Thanked 5 Times in 5 Posts
    Many thanks for this information.

    I will l use the data-* attribute for what I need because support
    for all the new input types is not given by all the different browsers.

    Next I have not found a way on how to localize/customize any error messages
    like for required fields or out of range values, when using the new input
    types.

    Regards
    My site
    If you’re doing software development right, you’re probably doing Agile wrong.
    -- Isaac Schlueter

  • #4
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,335
    Thanks
    11
    Thanked 588 Times in 569 Posts
    [QUOTE=hgs;1351600
    Next I have not found a way on how to localize/customize any error messages
    like for required fields or out of range values, when using the new input
    types.

    Regards[/QUOTE]
    the input types work in all browsers, they just have a better UX in newer browsers. There's no harm in using new input types on on old machines; they just act like a text input, which is what you are using anyway. but they provide better interfaces to the 80%+ of systems than can use them. Why punish 6 folks for the laziness of 1?

    for validation messages, use the new title attribute, while placeholder can be used for most of what title was used for. you can get even more specific using javascript, for example: input.setCustomValidty("Use your full 9 digit zip code").

    finally, you can get polyfills that use JS to recycle the existing HTML5 validation markup into an IE8-safe validation routine, if you want all your users to have the same experience.
    Last edited by rnd me; 08-12-2013 at 04:20 PM.
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/5/28) IE7:0.1, IE8:5.3, IE11:8.4, IE9:3.2, IE10:3.2, FF:18.2, CH:46, SF:7.9, NON-MOUSE:32%


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •