{"action":"created","issue":{"url":"https://api.github.com/repos/formvalidation/support/issues/256","labels_url":"https://api.github.com/repos/formvalidation/support/issues/256/labels{/name}","comments_url":"https://api.github.com/repos/formvalidation/support/issues/256/comments","events_url":"https://api.github.com/repos/formvalidation/support/issues/256/events","html_url":"https://github.com/formvalidation/support/issues/256","id":100504297,"number":256,"title":"formvalidation and UIKIT show/hide password component not compatible","user":{"login":"tbba","id":652879,"avatar_url":"https://avatars.githubusercontent.com/u/652879?v=3","gravatar_id":"","url":"https://api.github.com/users/tbba","html_url":"https://github.com/tbba","followers_url":"https://api.github.com/users/tbba/followers","following_url":"https://api.github.com/users/tbba/following{/other_user}","gists_url":"https://api.github.com/users/tbba/gists{/gist_id}","starred_url":"https://api.github.com/users/tbba/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/tbba/subscriptions","organizations_url":"https://api.github.com/users/tbba/orgs","repos_url":"https://api.github.com/users/tbba/repos","events_url":"https://api.github.com/users/tbba/events{/privacy}","received_events_url":"https://api.github.com/users/tbba/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"milestone":null,"comments":6,"created_at":"2015-08-12T09:35:11Z","updated_at":"2015-08-12T11:02:44Z","closed_at":null,"body":"Each of the script worked here, but not both at the same time."},"comment":{"url":"https://api.github.com/repos/formvalidation/support/issues/comments/130261999","html_url":"https://github.com/formvalidation/support/issues/256#issuecomment-130261999","issue_url":"https://api.github.com/repos/formvalidation/support/issues/256","id":130261999,"user":{"login":"nghuuphuoc","id":4226036,"avatar_url":"https://avatars.githubusercontent.com/u/4226036?v=3","gravatar_id":"","url":"https://api.github.com/users/nghuuphuoc","html_url":"https://github.com/nghuuphuoc","followers_url":"https://api.github.com/users/nghuuphuoc/followers","following_url":"https://api.github.com/users/nghuuphuoc/following{/other_user}","gists_url":"https://api.github.com/users/nghuuphuoc/gists{/gist_id}","starred_url":"https://api.github.com/users/nghuuphuoc/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/nghuuphuoc/subscriptions","organizations_url":"https://api.github.com/users/nghuuphuoc/orgs","repos_url":"https://api.github.com/users/nghuuphuoc/repos","events_url":"https://api.github.com/users/nghuuphuoc/events{/privacy}","received_events_url":"https://api.github.com/users/nghuuphuoc/received_events","type":"User","site_admin":false},"created_at":"2015-08-12T11:02:44Z","updated_at":"2015-08-12T11:02:44Z","body":"Looking at the source of UIKit form-password component, the input is retrieved by the following line \r\n```javascript\r\nthis.input = this.element.next(\"input\").length ? this.element.next(\"input\") : this.element.prev(\"input\");\r\n```\r\n(Here `this.element` is the Show/Hide label)\r\n\r\nThat code works fine until we use FormValidation rules on field which adds a feedback icon right after the input:\r\n\r\n```html\r\n<div class=\"uk-form-password\">\r\n    <input name=\"password\" type=\"password\" data-fv-field=\"password\">\r\n    <i class=\"fv-control-feedback\" data-fv-icon-for=\"password\" style=\"display: none;\"></i>\r\n    <a href=\"#\" class=\"uk-form-password-toggle\" data-uk-form-password=\"\">Show</a>\r\n</div>\r\n```\r\n\r\nNow we can't get the input element by\r\n```\r\nthis.input = this.element.next(\"input\").length ? this.element.next(\"input\") : this.element.prev(\"input\");\r\n```\r\n\r\nSo, we have two solutions\r\n\r\n1) Don't use the feedback icon on field: http://jsfiddle.net/nghuuphuoc/mwdpLm1f/5/\r\n\r\n```javascript\r\n$('#testForm').formValidation({\r\n    framework: 'uikit',\r\n    icon: {\r\n        valid: 'uk-icon-check',\r\n        invalid: 'uk-icon-times',\r\n        validating: 'uk-icon-refresh'\r\n    },\r\n    fields: {\r\n        password: {\r\n            icon: false,   // Here it is\r\n            validators: {\r\n                ...\r\n            }\r\n        }\r\n    }\r\n});\r\n```\r\n\r\n2) Move the feedback icon to other place.\r\nThe idea is taken from the [Showing icons in custom area](http://formvalidation.io/examples/showing-icon-custom-area/) example.\r\n\r\nThe working fiddle: http://jsfiddle.net/nghuuphuoc/mwdpLm1f/7/\r\n\r\n```javascript\r\n$('#testForm')\r\n    .on('init.field.fv', function(e, data) {\r\n        // $(e.target)  --> The field element\r\n        // data.fv      --> The FormValidation instance\r\n        // data.field   --> The field name\r\n        // data.element --> The field element\r\n    \r\n    \tif (data.field === 'password' && data.element.parent().hasClass('uk-form-password')) { \r\n        \tvar $icon = data.element.data('fv.icon');\r\n\t        $icon.insertAfter(data.element.parent());\r\n        }\r\n    })\r\n    .formValidation({\r\n        framework: 'uikit',\r\n        icon: {\r\n            valid: 'uk-icon-check',\r\n            invalid: 'uk-icon-times',\r\n            validating: 'uk-icon-refresh'\r\n        },\r\n        fields: {\r\n            password: {\r\n                validators: {\r\n                    ...\r\n                }\r\n            }\r\n        }\r\n    });\r\n```\r\n\r\nDONE :+1: \r\n\r\n===\r\n\r\nI will add an example on the official website later.\r\n"}}