Update 'Provide real-time validation' article, pattern attribute

[Meggin]

Suggest adding a note to the 'Provide real-time validation' article, under pattern attribute, that JavaScript is required to update the validation message. Might even be good to provide specific example.

Link to article: https://developers.google.com/web/fundamentals/design-and-ui/input/forms/provide-real-time-validation?hl=en

[petele]

No JavaScript is required to for the pattern attribute to work, it works automatically. For example: http://jsbin.com/nugasatapo/edit?html,output Is this what you mean? If not, can you clarify please.

[Meggin]

Sure. The pattern attribute works all right, and if you add a title, you
can see a more thorough description, but that title isn't accessible to
most screen readers (according to forms specification).

Also, according to the forms spec, not all browsers will necessarily parse
'title' the same way. So there's some risk here.

I played around with this, and customizing the error message using
JavaScript so that users know for sure what the pattern is seems to be
cleaner than adding another line to the existing error message using title.

Maybe even just add a note about what the spec says, and then link to
setCustomValidity?

I've written a fairly simple example for identity docs I'm working on which
I can share. It's super simple. Eiji needs to review it, but I'm hoping
it's OK.

On Tue, Sep 27, 2016 at 2:18 PM, Pete LePage notifications@github.com
wrote:

No JavaScript is required to for the pattern attribute to work, it works
automatically. For example: http://jsbin.com/nugasatapo/edit?html,output
Is this what you mean? If not, can you clarify please.

—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub
#3513 (comment),
or mute the thread
https://github.com/notifications/unsubscribe-auth/ABfU4dfhxRd_TTTgt4xrZmmvN0QzAk31ks5quYgKgaJpZM4KG6mR
.

[petele]

Can you share the example? I'm not familiar with the title attribute in this case.

[Meggin]

Sure. So this is the sample I'm using at the moment that doesn't have
title: http://jsbin.com/mazusuxodi/edit?html,css,js,console,output

The first solution shows the changed error message.

Here's the sample changed to just use title, no JS:
http://jsbin.com/moquyusovi/edit?html,css,js,console,output

This solution shows the default error message with a sentence below that is
the content described by title.

FYI-- Eiji is reviewing code, but if you see anything bad, let me know!

Meggin

On Wed, Sep 28, 2016 at 6:29 AM, Pete LePage notifications@github.com
wrote:

Can you share the example? I'm not familiar with the title attribute in
this case.

—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub
#3513 (comment),
or mute the thread
https://github.com/notifications/unsubscribe-auth/ABfU4fD-PSJS4lFfIiEkTnVtq8mX57Q7ks5qumvFgaJpZM4KG6mR
.