Add a .user-valid and .user-invalid to inputs, fieldsets and forms #3823
Conversation
| @@ -95,6 +110,11 @@ export class AmpForm { | |||
| /** @private */ | |||
| installSubmitHandler_() { | |||
| this.form_.addEventListener('submit', e => this.handleSubmit_(e)); | |||
| // Add 'focus' event on all inputs. | |||
|
Play around with the demo here to see how this works. I over-did the styling to showcase the different hooks at each level. Note that you might have to wait 2 minutes for the heroku instance to start. |
| const ancestors = []; | ||
| for (let ancestor = child.parentElement; ancestor; | ||
| ancestor = ancestor.parentElement) { | ||
| if (callback(ancestor)) { |
There was a problem hiding this comment.
per previous discussions, please call this predicate
|
PTAL |
| element.classList.add('user-valid'); | ||
| element.classList.remove('user-invalid'); | ||
| // Don't propagate user-valid if this was unmarked before. | ||
| return previousValidityState != UserValidityState.NONE; |
There was a problem hiding this comment.
We already know it's not USER_VALID, and we're testing that it's not NONE, so the only option left is USER_INVALID. Let's use == USER_INVALID instead.
mkhatib
changed the title
mkhatib
force-pushed
the
input-user-invalid
branch
from
f54b04d
to
9259a57
Compare
|
Thanks @jridgewell for the reviews! Added tests and addressed the comments. PTAL. |
|
Let me know if there are other comments on this PR. |
| */ | ||
| function isReportValiditySupported() { | ||
| if (reportValiditySupported === undefined) { | ||
| reportValiditySupported = !!document.createElement('form').reportValidity; |
There was a problem hiding this comment.
You can't reference the global document.
| @@ -15,7 +15,12 @@ | |||
| */ | |||
|
|
|||
| import {createIframePromise} from '../../../../testing/iframe'; | |||
| import {AmpForm, installAmpForm} from '../amp-form'; | |||
| import { | |||
| AmpForm, | |||
|
Addressed comments. PTAL |
|
LGTM. |
mkhatib
force-pushed
the
input-user-invalid
branch
from
3e50dcb
to
3dbebef
Compare
|
This does not seem to update the fieldset with user-invalid in my test page (or my real pages) https://codepen.io/vercer/pen/aLRKpd This sets up a simple form > fieldset > input. When the single input is invalid, the input and form are marked user-invalid but the fieldset is marked user-valid. |
|
Hi @devvercer: Can you file a new issue? |
This would allow publishers to better handling and direct users attention when the fields they're interacting with become valid/invalid. As opposed to the
:validand:invalidpseudo classes which get applied on the document load.See :user-invalid spec and :-moz-ui-invalid - I don't try to match Mozilla prefixed. Instead I apply these classes when user interacts with the inputs.
ITI: #3343
Play around with the demo here to see how this works. I over-did the styling to showcase the different hooks at each level. Note that you might have to wait 2 minutes for the heroku instance to start.