diff --git a/examples/forms.amp.html b/examples/forms.amp.html index 2f459d0c22da..8af5d47b793f 100644 --- a/examples/forms.amp.html +++ b/examples/forms.amp.html @@ -491,6 +491,30 @@

Show As You Go Messages On Submit

+

Show As You Go Messages (with all messages on submit)

+
+
+ + + +
+
+

on=change and form.submit examples

{ 'custom-validation-reporting', 'show-all-on-submit'); expect(getFormValidator(form)).to.be.instanceOf( ShowAllOnSubmitValidator); + form.setAttribute( + 'custom-validation-reporting', 'interact-and-submit'); + expect(getFormValidator(form)).to.be.instanceOf( + InteractAndSubmitValidator); form.setAttribute( 'custom-validation-reporting', 'show-first-on-submit'); expect(getFormValidator(form)).to.be.instanceOf( @@ -366,6 +371,68 @@ describes.realWin('form-validators', {amp: true}, env => { expect(validations[1].className).to.not.contain('visible'); expect(validations[2].className).to.not.contain('visible'); }); + + describe('InteractAndSubmitValidator', () => { + it('should report validation for input on interaction', () => { + const doc = env.win.document; + const form = getForm(doc, true); + const validations = doc.querySelectorAll('[visible-when-invalid]'); + const validator = new AsYouGoValidator(form); + form.elements[0].validationMessage = 'Name is required'; + form.elements[1].validationMessage = 'Email is required'; + + validator.onBlur({target: form.elements[0]}); + expect(validations[0].className).to.contain('visible'); + expect(validations[1].className).to.not.contain('visible'); + expect(validations[2].className).to.not.contain('visible'); + + form.elements[0].value = 'John Miller'; + validator.onInput({target: form.elements[0]}); + expect(validations[0].className).to.not.contain('visible'); + expect(validations[1].className).to.not.contain('visible'); + expect(validations[2].className).to.not.contain('visible'); + + validator.onInput({target: form.elements[1]}); + expect(validations[0].className).to.not.contain('visible'); + expect(validations[1].className).to.contain('visible'); + expect(validations[2].className).to.not.contain('visible'); + expect(validations[1].textContent).to.equal('Email is required'); + + form.elements[1].value = 'invalidemail'; + form.elements[1].validationMessage = 'Email format is wrong'; + validator.onInput({target: form.elements[1]}); + expect(validations[0].className).to.not.contain('visible'); + expect(validations[1].className).to.not.contain('visible'); + expect(validations[2].className).to.contain('visible'); + expect(validations[2].textContent).to.not.equal( + 'Email format is wrong'); + expect(validations[2].textContent).to.equal(emailTypeValidationMsg); + + form.elements[1].value = 'valid@email.com'; + validator.onBlur({target: form.elements[1]}); + expect(validations[0].className).to.not.contain('visible'); + expect(validations[1].className).to.not.contain('visible'); + expect(validations[2].className).to.not.contain('visible'); + }); + + it('should report on interaction for non-active inputs on submit', () => { + const doc = env.win.document; + const form = getForm(doc, true); + const validations = doc.querySelectorAll('[visible-when-invalid]'); + const validator = new ShowAllOnSubmitValidator(form); + validator.report(); + + expect(doc.activeElement).to.equal(form.elements[0]); + expect(validations[0].className).to.contain('visible'); + expect(validations[1].className).to.contain('visible'); + expect(validations[2].className).to.not.contain('visible'); + + expect(doc.activeElement).to.equal(form.elements[0]); + expect(validations[0].className).to.contain('visible'); + expect(validations[1].className).to.contain('visible'); + expect(validations[2].className).to.not.contain('visible'); + }); + }); }); }); diff --git a/extensions/amp-form/amp-form.md b/extensions/amp-form/amp-form.md index 24f9644f9725..61ce11e9cb71 100644 --- a/extensions/amp-form/amp-form.md +++ b/extensions/amp-form/amp-form.md @@ -331,6 +331,9 @@ The `show-all-on-submit` reporting option shows all validation errors on all inv #### As You Go The `as-you-go` reporting option allows your user to see validation messages as they're interacting with the input. For example, if the user types an invalid email address, the user will see the error right away. Once they correct the value, the error goes away. +#### Interact and Submit +The `interact-and-submit` reporting option combines the behavior of `show-all-on-submit` and `as-you-go`. Individual fields will show any errors immediately after interactions, and on submit the form will show errors on all invalid fields. + ## Verification (Experimental) This feature is still experimental, so you need to [enable the experiment](https://www.ampproject.org/docs/reference/experimental) to use form verification.