Recently, I needed to implement a very straight forward HTML input. I know we do this kind of thing all the time, but I had some interesting insights I’d like to share. Check these input elements and validation notes:
Pretty simple, nothing too challenging. However, when I tried those min and max HTML 5 attributes, I got a very unexpected behavior: nothing. Input constraints work only when users set the value by using the browser widget, but they don’t prevent typed values.
I quickly googled for some solution, and I could not find anything reasonable - I would need to use a lib, or write some JavaScript for solving this.
Given those alternatives, I chose the second one and tried to write the lightest and simplest workaround for making min and max attributes work as expected. See:
Even being super simple, the approach above seems like something that should not be required.
Maybe I’m misunderstanding the purpose of max and min attributes, but I’ve checked the HTML 5.2 spec, and I still believe they should work like my JavaScript implementation.
Anyway, what you think? I’d appreciate some ideas :-)