3 ms·

Form validation isn't too bad these days IMO. Required, pattern, email, url, numbers, dates, etc. How should a combo box behave? It's a windows control but th

• dgb23 3y ago
  In terms of form validation: Those things are all useful, but also trivial, scoped to a single element and in some cases near useless from a UI/UX perspective on its own. Again, client side form validation is all about guiding the user. It's a pure UI concern that should make it easy and obvious for the user to understand if they are about to make a mistake or similar. Take "pattern" for example: At which point is this useful for UI? Does it tell an average user what they _actually_ need to know to provide a correct input? No of course not. Regex patterns are deemed black magic, even among some programmers. You are going to have to explain in words what the format (or pattern) is supposed to be. Great, the user understands what is should be. But the error message is still a useless and generic "It's not correct". We don't do that to ourselves btw. Our programming languages tell us exactly what the issue is and where it is. We also automatically insert characters and terms or at least suggest them. Or other trivial stuff like date/time ranges (from/to) can't be expressed with native form fields. The solution to this is of course to use JS: composite input fields, insert spacing or other characters to automatically structure inputs, make suggestions, underline errors etc. But all of that is bespoke, subtle and sometimes hard to make accessible. It's 2023.
  • tln 3y ago
    I'm not sure what feature you want to add to "tell the average user" in anything other than "explaining in words". In this example, pattern lets me show some explanation, in text, when the input doesn't match, without using Javascript <input pattern="[A-Za-z_][A-Za-z_0-9]+"> <div role="alert" class="explain-invalid">Enter an identifier</div> <style> input:invalid { border-color: red; } input:invalid + .explain-invalid { display: block; color: red; } .explain-invalid { display: none; } </style> I agree that it could be better. I made some suggestions myself in the survey. But IMO the basics aren't bad. A built-in date range would be nice. Perhaps you should suggest in the survey (if you didn't take it already)
    • dgb23 3y ago
      That's fine, but it's also a relatively easy to understand pattern that most can follow. You can explain it trivially in text. But even in a simple case like this: if the user makes a mistake, say inserts a character that doesn't match the pattern, there's no way to tell the user which character exactly causes the problem. Trivially, because the regex to validate, wouldn't be the regex (or parser) that finds the culprit and highlights it. You'd have to write a different regex for that (which is not natively supported anyways). A slightly better example of this: Say you let the user choose a password, but you limit the types of characters and also require that certain types of characters are inserted at least once. (Aside from the fact that this is a terrible idea. You see this in the wild all the time and it's an example that illustrates the problem.) Now the user's PW manager inserts a random, long password but the field doesn't validate. What's the message? How does the user find the culprit (character)? There are all sorts of things like that, especially with inputs that require a specific format. Credit card numbers, social security numbers, stuff like that. Again, I very much lean into HTML and Web standards when I can (and am aware) but at the same time you can't avoid JS if you want to make a good UI that helps the user and is accessible in many cases.