Polyfill reportValidation calls and bubble UI for webkit.

extensions/amp-form/0.1/amp-form.css

@@ -16,5 +16,30 @@
 
 form.amp-form-submit-success [submit-success],
 form.amp-form-submit-error [submit-error] {
-    display: block;
+  display: block;
+}
+
+
+.-amp-validation-bubble {
+  transform: translate(-50%, -100%);
+  background-color: white;
+  box-shadow: 0 5px 15px 0 rgba(0, 0, 0, .5);
+  max-width: 200px;
+  position: absolute;
+  display: none;
+  box-sizing: border-box;
+  padding: 10px;
+  border-radius: 5px;
+}
+
+.-amp-validation-bubble:after {
+  content: ' ';
+  position: absolute;
+  bottom: -8px;
+  left: 30px;
+  width: 0;
+  height: 0;
+  border-left: 8px solid transparent;
+  border-right: 8px solid transparent;
+  border-top: 8px solid #fff;
 }

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

@@ -26,6 +26,8 @@ import {templatesFor} from '../../../src/template';
 import {removeElement, childElementByAttr} from '../../../src/dom';
 import {installStyles} from '../../../src/styles';
 import {CSS} from '../../../build/amp-form-0.1.css';
+import {ValidationBubble} from './validation-bubble';
+import {vsyncFor} from '../../../src/vsync';
 
 /** @type {string} */
 const TAG = 'amp-form';
@@ -37,6 +39,9 @@ const FormState_ = {
   SUBMIT_SUCCESS: 'submit-success',
 };
 
+/** @type {?./validation-bubble.ValidationBubble|undefined} */
+let validationBubble;
+
 export class AmpForm {
 
   /**
@@ -50,6 +55,9 @@ export class AmpForm {
     /** @const @private {!Element} */
     this.form_ = element;
 
+    /** @const @private {!../../../src/service/vsync-impl.Vsync} */
+    this.vsync_ = vsyncFor(this.win_);
+
     /** @const @private {!Templates} */
     this.templates_ = templatesFor(this.win_);
 
@@ -94,12 +102,20 @@ export class AmpForm {
    * @private
    */
   handleSubmit_(e) {
-    if (e.defaultPrevented) {
+    if (this.state_ == FormState_.SUBMITTING) {
+      e.preventDefault();
       return;
     }
 
-    if (this.state_ == FormState_.SUBMITTING) {
+    const shouldValidate = !this.form_.hasAttribute('novalidate');
+    if (shouldValidate &&
+        this.form_.checkValidity && !this.form_.checkValidity()) {
       e.preventDefault();
+      // TODO(#3776): Use .mutate method when it supports passing state.
+      this.vsync_.run({
+        measure: undefined,
+        mutate: reportValidity,
+      }, {form: this.form_});
       return;
     }
 
@@ -146,7 +162,7 @@ export class AmpForm {
   }
 
   /**
-   * @param {!Object} data
+   * @param {!Object=} data
    * @private
    */
   renderTemplate_(data = {}) {
@@ -176,6 +192,73 @@ export class AmpForm {
 }
 
 
+/**
+ * Reports validity of the form passed through state object.
+ * @param {!Object} state
+ */
+function reportValidity(state) {
+  reportFormValidity(state.form);
+}
+
+
+/**
+ * Reports validity for the first invalid input - if any.
+ * @param {!HTMLFormElement} form
+ */
+function reportFormValidity(form) {
+  const inputs = form.querySelectorAll('input,select,textarea');
+  for (let i = 0; i < inputs.length; i++) {
+    if (!inputs[i].checkValidity()) {
+      reportInputValidity(inputs[i]);
+      break;
+    }
+  }
+}
+
+
+/**
+ * Revalidates the currently focused input after a change.
+ * @param {!KeyboardEvent} event
+ */
+function onInvalidInputKeyUp_(event) {
+  if (event.target.checkValidity()) {
+    validationBubble.hide();
+  } else {
+    validationBubble.show(event.target, event.target.validationMessage);
+  }
+}
+
+
+/**
+ * Hides validation bubble and removes listeners on the invalid input.
+ * @param {!Event} event
+ */
+function onInvalidInputBlur_(event) {
+  validationBubble.hide();
+  event.target.removeEventListener('blur', onInvalidInputBlur_);
+  event.target.removeEventListener('keyup', onInvalidInputKeyUp_);
+}
+
+
+/**
+ * Focuses and reports the invalid message of the input in a message bubble.
+ * @param {!HTMLInputElement} input
+ */
+function reportInputValidity(input) {
+  input./*OK*/focus();
+
+  // Remove any previous listeners on the same input. This avoids adding many
+  // listeners on the same element when the user submit pressing Enter or any
+  // other method to submit the form without the element losing focus.
+  input.removeEventListener('blur', onInvalidInputBlur_);
+  input.removeEventListener('keyup', onInvalidInputKeyUp_);
+
+  input.addEventListener('keyup', onInvalidInputKeyUp_);
+  input.addEventListener('blur', onInvalidInputBlur_);
+  validationBubble.show(input, input.validationMessage);
+}
+
+
 /**
  * Installs submission handler on all forms in the document.
  * @param {!Window} win
@@ -189,10 +272,17 @@ function installSubmissionHandlers(win) {
 }
 
 
-function installAmpForm(win) {
+/**
+ * @param {!Window} win
+ * @private visible for testing.
+ */
+export function installAmpForm(win) {
   return getService(win, 'amp-form', () => {
     if (isExperimentOn(win, TAG)) {
-      installStyles(win.document, CSS, () => installSubmissionHandlers(win));
+      installStyles(win.document, CSS, () => {
+        validationBubble = new ValidationBubble(win);
+        installSubmissionHandlers(win);
+      });
     }
     return {};
   });