5 ms·

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 ex

by 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.

by tln 3y ago

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.