diff --git a/bower.json b/bower.json index 018f4a1..86e93dd 100644 --- a/bower.json +++ b/bower.json @@ -21,7 +21,7 @@ "ignore": [], "dependencies": { "iron-a11y-announcer": "PolymerElements/iron-a11y-announcer#^1.0.0", - "iron-validatable-behavior": "PolymerElements/iron-validatable-behavior#^1.0.0", + "iron-validatable-behavior": "https://github.com/tlouisse/iron-validatable-behavior.git#feature/multipleValidators", "polymer": "Polymer/polymer#^1.0.0" }, "devDependencies": { @@ -31,5 +31,9 @@ "test-fixture": "PolymerElements/test-fixture#^1.0.0", "web-component-tester": "^4.0.0", "webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0" + }, + "resolutions": { + "iron-validatable-behavior": "feature/multipleValidators", + "iron-validator-behavior": "feature/multipleValidators" } } diff --git a/iron-input.html b/iron-input.html index ddb5277..a04fdb2 100644 --- a/iron-input.html +++ b/iron-input.html @@ -278,20 +278,11 @@ * @return {boolean} True if the value is valid. */ validate: function() { - // First, check what the browser thinks. Some inputs (like type=number) - // behave weirdly and will set the value to "" if something invalid is - // entered, but will set the validity correctly. - var valid = this.checkValidity(); - - // Only do extra checking if the browser thought this was valid. - if (valid) { - // Empty, required input is invalid - if (this.required && this.value === '') { - valid = false; - } else if (this.hasValidator()) { - valid = Polymer.IronValidatableBehavior.validate.call(this, this.value); - } - } + // Validatable is called first, so it will keep track of all individual states of validators that can be applied to it. + var validatableOutcome = Polymer.IronValidatableBehavior.validate.call(this, this.value); + + var requiredValid = this.required ? this.value !== '' : true; + var valid = validatableOutcome && this.checkValidity() && requiredValid; this.invalid = !valid; this.fire('iron-input-validate'); diff --git a/test/iron-input.html b/test/iron-input.html index fddf9ae..1fb9466 100644 --- a/test/iron-input.html +++ b/test/iron-input.html @@ -248,6 +248,18 @@ input.validate(); assert.isTrue(input.invalid, 'input is invalid'); }); + + test('custom validators will be called when browser validation results in invalid state'/* this enables error reporting per validator */, function() { + var node = fixture('native-and-custom-validator'); + var validator = node[0]; + var input = node[1]; + sinon.spy(validator, 'validate'); + // The validator allows this, but the browser doesn't. + input.value = 'zzz'; + input.validate(); + assert(validator.validate.called); + }); + }); suite('a11y', function() {