PolymerElements / iron-input

An input with data binding
https://webcomponents.org/element/PolymerElements/iron-input
33 stars 45 forks source link

validate() treats invalid input as valid if not required. #46

Closed Parakleta closed 8 years ago

Parakleta commented 9 years ago

The validate() function bails out early if the input value is empty and the input is not required. Browsers set the value to empty if the input doesn't pass type validation for the input field, and then set validity.valid to say that the input was invalid. The iron-input validate function should give priority to the validity.valid field being false above all else, and then only check the custom validator (the validity.valid field already checks the required attribute).

That is, if the browser says the input doesn't match the type of the field then it is automatically invalid regardless of any other processing that may happen. The custom validator is only applied to further restrict the input if the browser thinks it is valid.

I propose something like:

validate: function() {
  var valid = this.validity.valid;
  if (valid && this.hasValidator()) {
    valid = Polymer.IronValidatableBehavior.validate.call(this, this.value);
  }
  this.invalid = !valid;
  this.fire('iron-input-validate');
  return valid;
}

I don't know anything about cross browser compatibility so there may be problems with this approach, but the current approach prevents me from detecting and handling validation errors on numeric input fields.

Parakleta commented 9 years ago

I need to amend this suggestion to use the test valid && this.value && this.hasValidator() since the validate() function has no knowledge of the required field and so should never be passed an empty value.

notwaldorf commented 8 years ago

jsbin with the repro steps: http://jsbin.com/zayate/edit?html,output

notwaldorf commented 8 years ago

Fixed in #23