Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

HTML Form Validation is underused

expressionstatement.com

Post reply on HN
Print view View original

171–180 of 343 posts

Re: HTML Form Validation is underused

#171

Post by account42 »

LegionMammal978 wrote: post #93
lelanthran wrote: post #84

Earlier quoted context omitted.

> Spinners are obvious, but they are also needlessly fiddly to use with the mouse I think that a quick improvement would be to let the mouse wheel "spin" the number up/down when the input element is focused. An even better improvement would be having the ` ` element actually display the value as it changed, and allow the user to set that value directly (say, by typing it in). Right now, range is useless because the u…

> I think that a quick improvement would be to let the mouse wheel "spin" the number up/down when the input element is focused. Firefox did that for number inputs for a long time, until very recently. They switched it off in Firefox 130 because people kept inadvertently changing values in forms while scrolling through them [0]. Personally, I've set the about:config option to reenable it since I've found it useful in…

Isn't this same issue already solved for other scrollable elements? Scroll should only affect the individual element if the mouse was over that element when you started scrolling.

I guess the room for unwanted consequences is a bit bigger when the scrolling controlls the value instead of just the viewport.

Re: HTML Form Validation is underused

#173

Post by lelanthran »

k__ wrote: post #154

Built-in validation is pretty much the only reason I use forms. Capturing input with frameworks is much simpler than pulling the values out of an event object, so I'd be okay with just using input and button elements. Yet, that doesn't trigger the validation, so I end up wrapping it with a form element and using a submit button.

> Yet, that doesn't trigger the validation, so I end up wrapping it with a form element and using a submit button.

I run the validation manually using `reportValidity()` on `element.querySelector(...)` before passing it on to whatever.

Re: HTML Form Validation is underused

#174

Post by account42 »

mattgreenrocks wrote: post #18
pbreit wrote: post #11

The biggest, easiest to implement underutilization is: "Using specific type attribute values, such as "email", "number", or "url"" These can significantly improve user experience on mobile by triggering the optimal keyboard.

It’s amazing how many login forms are labeled “email” and then don’t have the correct type set.

From https://developer.mozilla.org/en-US/docs/Web/HTML/Element/in...

> Browsers automatically provide validation to ensure that only text that matches the standard format for Internet email addresses is entered into the input box. Browsers use an algorithm equivalent to the following regular expression:

> /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/;

Which doesn't even allow all valid email addresses :|

No support for quoted local parts. No support for punycode domains. Disappointing.

Use instead to just get the email-optimized keyboard on phones without the misguided validation.

Re: HTML Form Validation is underused

#175

Post by blueflow »

JodieBenitez wrote: post #143

Do we finally have a standard solution for input masks ? 25 years ago I was struggling with this while my fellow desktop app devs had good input masks in their widgets, with easy to use pattern syntax. That would be embarrassing if not.

Every other website or program now uses a different set of UI patterns. We are not advancing, we are regressing.

I do miss when textboxes had inset and buttons had outset borders.

Re: HTML Form Validation is underused

#176

Post by account42 »

p_l wrote: post #74
marcellus23 wrote: post #55

Earlier quoted context omitted.

> because we need to drive them from on-screen keyboard that for various reasons is also implemented in-page There's your problem right there. Can you expand on the reasons? It seems like very bad practice for a website to provide it's own "keyboard" instead of using the system keyboard.

This is for a closed system that unfortunately sometimes is supposed to be available outside[1] - a touch screen panel UI for (big[2]) embedded system. It's hard to impossible to properly guide OS outside the browser regarding what keyboard we want at different points in time unless we end up also implementing custom keyboard plus some way to talk with it from JS. Previously we used a Chromium extension that could by…

Isn't this use case already solved by phone browsers? Layouts are controlled via the inputmode attribute. Positioning the keyboard should be something solved by the host environment.

Re: HTML Form Validation is underused

#177

Post by hluska »

francislavoie wrote: post #122
Dwedit wrote: post #121

Earlier quoted context omitted.

I used to write those fancy textboxes that reformatted your input as a phone number as you type, and intercept paste, and all that. But then it turns out that you really do want a free-form text input. Let people paste text in, edit their text freely, then let it validate afterwards. When it validates, then reformat it. For example, text boxes with length limits. These are awful. It messes with your ability to paste…

Nah. Users are too stupid to fix their own inputs in many cases. Seen inputs with zero-width spaces that are invisible which fail validation. User doesn't understand why, complains. Enforcing a character set for certain kinds of inputs is a very good thing.

I’ve read some very user hostile things in my career, but this one is particularly acerbic. It’s a bad look.

If I ever grew to hate users this much, I would find a new career. You should consider that.

Re: HTML Form Validation is underused

#178

Post by Macha »

bryanrasmussen wrote: post #78
mattmanser wrote: post #36

Earlier quoted context omitted.

A bit perplexed by your comment. That wasn't a main reason people started using javascript. I even remember when people started evangelizing client-side validation in the mid-2000s. Javascript was already a normal tool used in web apps by then, and most web developers would regularly be adding javascript to their apps. Back then it was a bit of a pita as you had all sorts of gotchas with javascript memory leaks by re…

probably they mean why people started using JS in form validation, and not JS altogether, although agree that isn't the reason either.

JS form validation quite significantly predates HTML form validation. The alternative was server side form validation, for the longest time. HTML form validation was meant to standardise and reduce the need for JS validation, but for UX reasons it hasn't really managed that. And that you'll need JS anyway if you're doing validation specific to your business logic that doesn't fit into the set of rules HTML validation has.

Re: HTML Form Validation is underused

#179

Post by user3939382 »

nikeee wrote: post #31
pbreit wrote: post #11

The biggest, easiest to implement underutilization is: "Using specific type attribute values, such as "email", "number", or "url"" These can significantly improve user experience on mobile by triggering the optimal keyboard.

I avoid the use of `type=number` and use `type=text inputmode=numeric` instead. It doesn't come with these arrow buttons which most users don't need anyway for entering numbers. Also the keyboard is better on iOS.

And yet in both cases the browser insanely casts the data type to string when reading the value.

Re: HTML Form Validation is underused

#180

Post by blueflow »

hk1337 wrote: post #159
6510 wrote: post #108

Earlier quoted context omitted.

https://jsfiddle.net/gaby_de_wilde/1qh4cax7/ I'm trying to picture a room full of people developers agreeing letters are numbers too! Lets give the little people a slider but lets call it a range! I really feel like they are trolling. You start with a neat database table then you engage in an endless struggle trying to allow the user to edit a single row of it. It really feels like you are not suppose to do it. As if…

They’d want 7 parallel lines, 1 red, 2 green, 2 transparent, 2 blue. Oh, and 1 of those lines should be perpendicular.

For the confused: This is a reference to "The Expert" sketch: https://www.youtube.com/watch?v=BKorP55Aqvg
Post reply on HN