validate input using html constraints api

Author: Yvonne Yip

core-input.html

@@ -18,27 +18,37 @@
  *
  *     <core-input multiline placeholder="Enter multiple lines here"></core-input>
  *
- * The text input's value is considered "committed" if the user hits the `enter`
- * key or blurs the input after changing the value. The "change" event is fired
+ * The text input's value is considered "committed" if the user hits the "enter"
+ * key or blurs the input after changing the value. The `change` event is fired
  * when the value becomes committed, and the committed value is stored in the
- * "value" property. The current value of the input is stored in the "inputValue"
+ * `value` property. The current value of the input is stored in the `inputValue`
  * property.
  *
- * core-input also can optionally validate the value by providing it with a
- * regular expression to match against, or a validation function. The
- * "input-invalid" event is fired if the input value changes and is invalid.
- * The "invalid" property is also available for observation.
+ * Validation
+ * ----------
+ *
+ * core-input can optionally validate the value using the HTML5 constraints API,
+ * similar to native inputs. There are two methods to enable input validation:
+ *
+ * 1. By setting the `type` attribute. For example, setting it to `email` will
+ *    check the value is a valid email, and setting it to `number` will check
+ *    the input is a number.
+ *
+ * 2. By setting attributes related to validation. The attributes are `pattern`,
+ *    `min`, `max`, `step` and `required`.
+ *
+ * Only `required` is supported for multiline inputs currently.
  *
  * Example:
  *
- *     // valid only if the value is a number
- *     <core-input validate="^[0-9]*$" on-input-invalid="{{inputInvalidAction}}"></core-input>
+ *     <core-input type="email" placeholder="enter your email"></core-input>
+ *
+ *     <core-input type="number" min="5" placeholder="enter a number greater than or equal to 5"></core-input>
  *
- *     this.$.input.validate = /^[0-9]*$/;  // valid only if the value is a number
+ *     <core-input pattern=".*abc.*" placeholder="enter something containing 'abc'"></core-input>
  *
- *     this.$.input2.validate = function(value) {
- *       return value === 'foo';  // valid only if the value is 'foo'
- *     }
+ * See https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation
+ * for more info on validation.
  *
  * @group Polymer Core Elements
  * @element core-input
@@ -89,7 +99,7 @@
     </template>
 
     <template if="{{!multiline}}">
-      <input id="input" value="{{inputValue}}" disabled?="{{disabled}}" type="{{type}}" placeholder="{{placeholder}}" required?="{{required}}" readonly?="{{readonly}}" aria-label="{{label || placeholder}}" aria-invalid="{{invalid}}" on-change="{{inputChangeAction}}" on-focus="{{inputFocusAction}}" on-blur="{{inputBlurAction}}">
+      <input id="input" value="{{inputValue}}" disabled?="{{disabled}}" type="{{type}}" placeholder="{{placeholder}}" required?="{{required}}" readonly?="{{readonly}}" pattern="{{pattern}}" min="{{min}}" max="{{max}}" step="{{step}}" maxlength="{{maxlength}}" aria-label="{{label || placeholder}}" aria-invalid="{{invalid}}" on-keydown="{{keydownAction}}" on-change="{{inputChangeAction}}" on-focus="{{inputFocusAction}}" on-blur="{{inputBlurAction}}">
     </template>
 
   </template>
@@ -118,15 +128,6 @@
          */
         disabled: false,
 
-        /**
-         * Set the input type. Not supported for `multiline`.
-         *
-         * @attribute type
-         * @type string
-         * @default text
-         */
-        type: 'text',
-
         /**
          * If true, the user cannot modify the value of the input.
          *
@@ -136,15 +137,6 @@
          */
         readonly: false,
 
-        /**
-         * If true, the input is invalid until the value becomes non-null.
-         *
-         * @attribute required
-         * @type boolean
-         * @default false
-         */
-        required: false,
-        
         /**
          * If true, this input accepts multi-line input like a `<textarea>`
          *
@@ -187,36 +179,73 @@
          * @default ''
          */
         value: '',
-  
+
+        /**
+         * Set the input type. Not supported for `multiline`.
+         *
+         * @attribute type
+         * @type string
+         * @default text
+         */
+        type: 'text',
+
+        /**
+         * If true, the input is invalid if its value is null.
+         *
+         * @attribute required
+         * @type boolean
+         * @default false
+         */
+        required: false,
+
         /**
-         * If this property is not null, the text input's inputValue will be
-         * validated. You can validate the value with either a regular expression
-         * or a custom function.
+         * A regular expression to validate the input value against. See
+         * https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes
+         * for more info. Not supported if `multiline` is true.
          *
-         * To use a regular expression, set this property to a RegExp object or
-         * a string containing the regular expression to match against. To use a
-         * custom validator, set this property to a function with the signature
-         * function(value) that returns a boolean. The input is valid if the
-         * function returns true.
+         * @attribute pattern
+         * @type string
+         * @default '.*'
+         */
+        // FIXME(yvonne): The default is set to .* because we can't bind to pattern such
+        // that the attribute is unset if pattern is null.
+        pattern: '.*',
+
+        /**
+         * If set, the input is invalid if the value is less than this property. See
+         * https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes
+         * for more info. Not supported if `multiline` is true.
          *
-         * Example:
+         * @attribute min
+         */
+        min: null,
+
+        /**
+         * If set, the input is invalid if the value is greater than this property. See
+         * https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes
+         * for more info. Not supported if `multiline` is true.
          *
-         *     // valid only if the value is a number
-         *     <core-input validate="^[0-9]*$"></core-input> 
-         * 
-         *     // valid only if the value is a number
-         *     this.$.input.validate = /^[0-9]*$/;
+         * @attribute max
+         */
+        max: null,
+
+        /**
+         * If set, the input is invalid if the value is not `min` plus an integral multiple
+         * of this property. See
+         * https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#Validation-related_attributes
+         * for more info. Not supported if `multiline` is true.
          *
-         *     this.$.input2.validate = function(value) {
-         *         // valid only if the value is 'foo'
-         *         return value === 'foo';  
-         *     }
+         * @attribute step
+         */
+        step: null,
+
+        /**
+         * The maximum length of the input value.
          *
-         * @attribute validate
-         * @type string|RegExp|Function(value)
-         * @default null
+         * @attribute maxlength
+         * @type number
          */
-        validate: null,
+        maxlength: null,
 
         /**
          * If this property is true, the text input's inputValue failed validation.
@@ -225,52 +254,28 @@
          * @type boolean
          * @default false
          */
-        invalid: false,
+        invalid: false
       },
 
       ready: function() {
         this.handleTabindex(this.getAttribute('tabindex'));
       },
 
-      validateValue: function() {
-        var valid = true;
-
-        if (this.validate) {
-
-          if (!this.inputValue) {
-            valid = !this.required;
-          } else if (typeof this.validate === 'string') {
-            valid = new RegExp(this.validate).exec(this.inputValue);
-          } else if (this.validate.exec) {
-            valid = this.validate.exec(this.inputValue);
-          } else if (this.validate instanceof Function) {
-            valid = this.validate.call(this, this.inputValue);
-          }
-
-        } else if (this.required) {
-          valid = !!this.inputValue;
-        }
-
-        this.invalid = !valid;
-      },
-
       invalidChanged: function() {
         this.classList.toggle('invalid', this.invalid);
-        this.fire('input-'+ this.invalid ? 'invalid' : 'valid', {value: this.inputValue});
+        this.fire('input-'+ (this.invalid ? 'invalid' : 'valid'), {value: this.inputValue});
       },
 
       inputValueChanged: function() {
-        if (this.validate || this.required) {
-          this.validateValue();
-        }
+        this.updateValidity_();
       },
 
       valueChanged: function() {
         this.inputValue = this.value;
       },
 
       requiredChanged: function() {
-        this.validateValue();
+        this.updateValidity_();
       },
 
       attributeChanged: function(attr, oldVal, curVal) {
@@ -296,6 +301,22 @@
          this.value = this.inputValue;
       },
 
+      updateValidity_: function() {
+        if (this.$.input.willValidate) {
+          this.invalid = !this.$.input.validity.valid;
+        }
+      },
+
+      keydownAction: function() {
+        // for type = number, the value is the empty string unless the input is a valid number.
+        // FIXME(yvonne): check other types
+        if (this.type === 'number') {
+          this.async(function() {
+            this.updateValidity_();
+          });
+        }
+      },
+
       inputChangeAction: function() {
         this.commit();
         if (!window.ShadowDOMPolyfill) {
@@ -347,40 +368,56 @@
         this.$.input.focus();
       },
 
-      setSelectionRange: function( selectionStart, selectionEnd, selectionDirection ) {
+      setSelectionRange: function(selectionStart, selectionEnd, selectionDirection) {
         // forward setSelectionRange method to the internal input / textarea element
-        this.$.input.setSelectionRange( selectionStart, selectionEnd, selectionDirection );
+        this.$.input.setSelectionRange(selectionStart, selectionEnd, selectionDirection);
       },
 
-      setRangeText: function( replacement, start, end, selectMode ) {
+      setRangeText: function(replacement, start, end, selectMode) {
         // forward setRangeText method to the internal input element
-        if ( !this.multiline ) {
-          this.$.input.setRangeText( replacement, start, end, selectMode );
+        if (!this.multiline) {
+          this.$.input.setRangeText(replacement, start, end, selectMode);
         }
       },
 
-      stepDown: function( n ) {
+      stepDown: function(n) {
         // forward stepDown method to the internal input element
-        if ( !this.multiline ) {
-          this.$.input.stepDown( n );
+        if (!this.multiline) {
+          this.$.input.stepDown(n);
         }
       },
 
-      stepUp: function( n ) {
+      stepUp: function(n) {
         // forward stepUp method to the internal input element
-        if ( !this.multiline ) {
-          this.$.input.stepUp( n );
+        if (!this.multiline) {
+          this.$.input.stepUp(n);
         }
+      },
+
+      get willValidate() {
+        return this.$.input.willValidate;
+      },
+
+      get validity() {
+        return this.$.input.validity;
+      },
+
+      get validationMessage() {
+        return this.$.input.validationMessage;
+      },
+
+      checkValidity: function() {
+        var r = this.$.input.checkValidity();
+        this.updateValidity_();
+        return r;
+      },
+
+      setCustomValidity: function(message) {
+        this.$.input.setCustomValidity(message);
+        this.updateValidity_();
       }
 
     });
-
-    CoreInput = function() {
-      return document.createElement('core-input');
-    };
-    CoreInput.validate = {
-      number: /^[0-9]*$/
-    };
   </script>
 
 </polymer-element>