{"action":"created","issue":{"url":"https://api.github.com/repos/PolymerElements/gold-email-input/issues/26","labels_url":"https://api.github.com/repos/PolymerElements/gold-email-input/issues/26/labels{/name}","comments_url":"https://api.github.com/repos/PolymerElements/gold-email-input/issues/26/comments","events_url":"https://api.github.com/repos/PolymerElements/gold-email-input/issues/26/events","html_url":"https://github.com/PolymerElements/gold-email-input/issues/26","id":97679383,"number":26,"title":"Observing input validity - what is `invalid` property used for?","user":{"login":"zerodevx","id":9677698,"avatar_url":"https://avatars.githubusercontent.com/u/9677698?v=3","gravatar_id":"","url":"https://api.github.com/users/zerodevx","html_url":"https://github.com/zerodevx","followers_url":"https://api.github.com/users/zerodevx/followers","following_url":"https://api.github.com/users/zerodevx/following{/other_user}","gists_url":"https://api.github.com/users/zerodevx/gists{/gist_id}","starred_url":"https://api.github.com/users/zerodevx/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/zerodevx/subscriptions","organizations_url":"https://api.github.com/users/zerodevx/orgs","repos_url":"https://api.github.com/users/zerodevx/repos","events_url":"https://api.github.com/users/zerodevx/events{/privacy}","received_events_url":"https://api.github.com/users/zerodevx/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"milestone":null,"comments":6,"created_at":"2015-07-28T11:11:54Z","updated_at":"2015-08-21T10:20:14Z","closed_at":null,"body":"I took interest in this SO question: http://stackoverflow.com/questions/31643650/polymer-1-0-input-validity-observer and I can certainly imagine use-cases to observe input validity.\r\n\r\nGiven that I have a template\r\n\r\n```html\r\n<gold-email-input id=\"foo\" bind-value=\"{{myEmail}}\" auto-validate\r\n                  error-message=\"Invalid email address\" invalid=\"{{isInvalid}}\">\r\n</gold-email-input>\r\n```\r\n\r\nand prototype\r\n\r\n```javascript\r\nproperties: {\r\n  myEmail: String,\r\n  isInvalid: {\r\n    type: Boolean,\r\n    observer: \"isInvalidChanged\"\r\n  }\r\n}\r\n```\r\n\r\n`gold-email-input` extends `Polymer.PaperInputBehavior`, and according to [this](https://github.com/PolymerElements/paper-input/blob/master/paper-input-behavior.html#L54-L61), \r\n\r\n>/**\r\n       * Returns true if the value is invalid. Bind this to both the `<paper-input-container>`'s\r\n       * and the input's `invalid` property.\r\n       */\r\n      invalid: {\r\n        type: Boolean,\r\n        value: false\r\n      },\r\n\r\nthe `invalid` property returns `true` if the value is invalid. In this case, is there a reason why `notify: true` is not set?\r\n\r\nSimilarly, `gold-email-input` uses `paper-input-container` and [it is not set to notify upwards as well](https://github.com/PolymerElements/paper-input/blob/master/paper-input-container.html#L300-L308).\r\n\r\nLastly, in [gold-email-input.html](https://github.com/PolymerElements/gold-email-input/blob/master/gold-email-input.html#L60), the `invalid` attribute is set to a one-way bind from host to `paper-input-container`.\r\n\r\nIf I make the above 3 changes, the `invalid` property becomes observable. Is this a bug?\r\n\r\n"},"comment":{"url":"https://api.github.com/repos/PolymerElements/gold-email-input/issues/comments/133364740","html_url":"https://github.com/PolymerElements/gold-email-input/issues/26#issuecomment-133364740","issue_url":"https://api.github.com/repos/PolymerElements/gold-email-input/issues/26","id":133364740,"user":{"login":"zerodevx","id":9677698,"avatar_url":"https://avatars.githubusercontent.com/u/9677698?v=3","gravatar_id":"","url":"https://api.github.com/users/zerodevx","html_url":"https://github.com/zerodevx","followers_url":"https://api.github.com/users/zerodevx/followers","following_url":"https://api.github.com/users/zerodevx/following{/other_user}","gists_url":"https://api.github.com/users/zerodevx/gists{/gist_id}","starred_url":"https://api.github.com/users/zerodevx/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/zerodevx/subscriptions","organizations_url":"https://api.github.com/users/zerodevx/orgs","repos_url":"https://api.github.com/users/zerodevx/repos","events_url":"https://api.github.com/users/zerodevx/events{/privacy}","received_events_url":"https://api.github.com/users/zerodevx/received_events","type":"User","site_admin":false},"created_at":"2015-08-21T10:20:14Z","updated_at":"2015-08-21T10:20:14Z","body":"Hi @notwaldorf - thanks for your attention; been meaning to ask... who's waldorf?? Anyhow,\r\n\r\n### Observing input validity\r\n\r\nI'm quite sure there are valid use-cases for this - there's been a few +1s to this, and I think others would like to have this option as well. Say I want to pre-populate the field imperatively, and want to be notified when an error is triggered so that I can take some actions. Setting `invalid` to `notify: true` looks like a simple way to get this information.\r\n\r\nHowever, *if the Polymer owners choose to provide this functionality*, it makes more sense to instead fire a `paper-input-validity-changed` custom event from `paper-input-container`, since this is the base element in use by all other custom input web components. As the event bubbles up, developers can easily and declaratively listen for that from their respective component.\r\n\r\n### Regarding my SO answer\r\n\r\nMy [original answer](http://stackoverflow.com/questions/31643650/polymer-1-0-input-validity-observer) uses *MutationObservers* API to capture validity change as a workaround - it is on hindsight an anti-pattern - partly because MOs are unable to pierce through the shadow dom under native behavior.\r\n\r\nIf I understand your intentions correctly, perhaps the recommended pattern is to **manually** perform validation - eg.\r\n\r\n```html\r\n<template>\r\n  ...\r\n  <gold-email-input id=\"foo\" value=\"{{email}}\" error-message=\"Invalid email!!\"></gold-email-input>\r\n</template>\r\n<script>\r\n  ...\r\n  properties: {\r\n    email: { type: String, observer: \"emailChanged\" }\r\n  },\r\n  emailChanged: function () {\r\n    var valid = this.$.foo.validate();\r\n    if (!valid) {\r\n      // do my thing\r\n    }\r\n  }\r\n</script>\r\n```\r\n\r\n### Issue when setting value imperatively\r\n\r\nWhich brings me to the next issue - setting `value` imperatively does not trigger a validation when `auto-validate` is asserted. Here is the repro: http://jsbin.com/nicubapaya/edit?html,output\r\n\r\nThe problem lies between [L120 - L132](https://github.com/PolymerElements/gold-email-input/blob/master/gold-email-input.html#L120-L132) - it is more generic to listen to `value` changes instead of keypresses. \r\n\r\n### Issue deleting email value when `required` is negated\r\n\r\nIf the input is **not** `required`, expected behavior should be when `value = \"\"`, the email should be considered \"valid\". Referring to the above [repro](http://jsbin.com/nicubapaya/edit?html,output), try typing something, then deleting it - the input remains in \"invalid\" status.\r\n\r\nThe problem lies in [L136 - L138](https://github.com/PolymerElements/gold-email-input/blob/master/gold-email-input.html#L136-L138) - the `validate()` method returns `true` without actually setting `paper-input-container`'s `invalid` property.\r\n\r\n### Putting it all together\r\n\r\nHere is the [PR](https://github.com/PolymerElements/gold-email-input/pull/30). This fixes:\r\n1. Auto-validating of values that are set imperatively;\r\n2. ensuring correct behavior when `auto-validate` is `true` and `required` is `false`;\r\n3. and save some CPU cycles by first checking if change is needed before actually changing.\r\n\r\nI have omitted setting `invalid` to notify upwards for now (the irony is not lost on me) - perhaps the pattern mentioned above is the recommended solution.\r\n\r\nThanks,\r\nJ\r\n\r\n\r\n"}}