Add a combination as-you-go and show-all-on-submit validator

examples/forms.amp.html

@@ -491,6 +491,30 @@ <h4>Show As You Go Messages On Submit</h4>
     </fieldset>
 </form>
 
+<h4>Show As You Go Messages (with all messages on submit)</h4>
+<form method="post"
+      action-xhr="/form/echo-json/post"
+      target="_blank"
+      custom-validation-reporting="interact-and-submit">
+    <fieldset>
+        <label>
+            <span>Your name</span>
+            <input type="text" name="name" id="name7" required pattern="\w+\s\w+">
+            <span visible-when-invalid="valueMissing" validation-for="name7"></span>
+            <span visible-when-invalid="patternMismatch" validation-for="name7">
+                Please enter your first and last name separated by a space (e.g. Jane Miller)
+            </span>
+        </label>
+        <label>
+            <span>Your email</span>
+            <input type="email" name="email" id="email7" required>
+            <span visible-when-invalid="valueMissing" validation-for="email7"></span>
+            <span visible-when-invalid="typeMismatch" validation-for="email7"></span>
+        </label>
+        <input type="submit" value="Subscribe">
+    </fieldset>
+</form>
+
 <h4 id="header1">on=change and form.submit examples</h4>
 <button on="tap:header1.submit">Wrong Action - should throw an error</button>
 <form method="post"

extensions/amp-form/0.1/form-validators.js

@@ -51,6 +51,7 @@ export function setCheckValiditySupportedForTesting(isSupported) {
 const CustomValidationTypes = {
   AsYouGo: 'as-you-go',
   ShowAllOnSubmit: 'show-all-on-submit',
+  AsYouGoShowAllOnSubmit: 'interact-and-submit',
   ShowFirstOnSubmit: 'show-first-on-submit',
 };
 
@@ -337,6 +338,15 @@ export class AsYouGoValidator extends AbstractCustomValidator {
 }
 
 
+/** @private visible for testing */
+export class InteractAndSubmitValidator extends ShowAllOnSubmitValidator {
+  /** @override */
+  shouldValidateOnInteraction(unusedInput) {
+    return true;
+  }
+}
+
+
 /**
  * Returns the form validator instance.
  *
@@ -351,6 +361,8 @@ export function getFormValidator(form) {
       return new AsYouGoValidator(form);
     case CustomValidationTypes.ShowAllOnSubmit:
       return new ShowAllOnSubmitValidator(form);
+    case CustomValidationTypes.AsYouGoShowAllOnSubmit:
+      return new InteractAndSubmitValidator(form);
     case CustomValidationTypes.ShowFirstOnSubmit:
       return new ShowFirstOnSubmitValidator(form);
   }

extensions/amp-form/0.1/test/test-form-validators.js

@@ -21,6 +21,7 @@ import {
   PolyfillDefaultValidator,
   AsYouGoValidator,
   ShowAllOnSubmitValidator,
+  InteractAndSubmitValidator,
   ShowFirstOnSubmitValidator,
 } from '../form-validators';
 import {ValidationBubble} from '../validation-bubble';
@@ -111,6 +112,10 @@ describes.realWin('form-validators', {amp: true}, env => {
           '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');
+      });
+    });
   });
 
 });