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,16 @@ 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();
+      this.vsync_.run({mutate: reportValidity}, {form: this.form_});
       return;
     }
 
@@ -146,7 +158,7 @@ export class AmpForm {
   }
 
   /**
-   * @param {!Object} data
+   * @param {!Object=} data
    * @private
    */
   renderTemplate_(data = {}) {
@@ -176,9 +188,75 @@ export class AmpForm {
 }
 
 
+function reportValidity(state) {
+  reportFormValidity(state.form);
+}
+
+/**
+ * Reports validity for the first invalid input - if any.
+ * @param {!HTMLFormElement} form
+ * @private
+ */
+function reportFormValidity(form) {
+  const inputs = toArray(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
+ * @private
+ */
+function onInvalidInputKeyUp_(event) {
+  validationBubble.hide();
+  if (!event.target.checkValidity()) {
+    validationBubble.show(event.target, event.target.validationMessage);
+  }
+}
+
+
+/**
+ * Hides validation bubble and removes listeners on the invalid input.
+ * @param {!Event} event
+ * @private
+ */
+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
+ * @private
+ */
+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
+ * @private
  */
 function installSubmissionHandlers(win) {
   onDocumentReady(win.document, () => {
@@ -189,10 +267,17 @@ function installSubmissionHandlers(win) {
 }
 
 
+/**
+ * @param {!Window} win
+ * @private
+ */
 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(window);
+        installSubmissionHandlers(win);
+      });
     }
     return {};
   });

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

@@ -0,0 +1,106 @@
+/**
+ * Copyright 2016 The AMP HTML Authors. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS-IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import {vsyncFor} from '../../../src/vsync';
+import {viewportFor} from '../../../src/viewport';
+import {setStyles} from '../../../src/style';
+
+export class ValidationBubble {
+
+  /**
+   * Creates a bubble component to display messages in.
+   * @param {!Window} win
+   */
+  constructor(win) {
+
+    /** @private @const {!Viewport} */
+    this.viewport_ = viewportFor(win);
+
+    /** @private @const {!../../../src/service/vsync-impl.Vsync} */
+    this.vsync_ = vsyncFor(win);
+
+    /** @private @const {!HTMLDivElement} */
+    this.bubbleElement_ = win.document.createElement('div');
+    this.bubbleElement_.classList.add('-amp-validation-bubble');
+    win.document.body.appendChild(this.bubbleElement_);
+  }
+
+  /**
+   * Hides the bubble off screen.
+   */
+  hide() {
+    this.vsync_.run({
+      mutate: hideBubble,
+    }, {
+      bubbleElement: this.bubbleElement_,
+    });
+  }
+
+  /**
+   * Shows the bubble targeted to an element with the passed message.
+   * @param {!HTMLElement} targetElement
+   * @param {string} message
+   */
+  show(targetElement, message) {
+    const state = {
+      message,
+      targetElement,
+      bubbleElement: this.bubbleElement_,
+      viewport: this.viewport_,
+    };
+    this.vsync_.run({
+      measure: measureTargetElement,
+      mutate: showBubbleElement,
+    }, state);
+  }
+}
+
+
+/**
+ * Hides the bubble element passed through state object.
+ * @param {!Object} state
+ * @private
+ */
+function hideBubble(state) {
+  setStyles(state.bubbleElement, {
+    display: 'none',
+  });
+}
+
+
+/**
+ * Measures the layout for the target element passed through state object.
+ * @param {!Object} state
+ * @private
+ */
+function measureTargetElement(state) {
+  state.targetRect = state.viewport.getLayoutRect(state.targetElement);
+}
+
+
+/**
+ * Updates text content, positions and displays the bubble.
+ * @param {!Object} state
+ * @private
+ */
+function showBubbleElement(state) {
+  state.bubbleElement.textContent = state.message;
+  setStyles(state.bubbleElement, {
+    display: 'initial',
+    top: `${state.targetRect.top - 10}px`,
+    left: `${state.targetRect.left + state.targetRect.width / 2}px`,
+  });
+}