{"action":"created","issue":{"url":"https://api.github.com/repos/18F/cms-hitech-apd/issues/832","repository_url":"https://api.github.com/repos/18F/cms-hitech-apd","labels_url":"https://api.github.com/repos/18F/cms-hitech-apd/issues/832/labels{/name}","comments_url":"https://api.github.com/repos/18F/cms-hitech-apd/issues/832/comments","events_url":"https://api.github.com/repos/18F/cms-hitech-apd/issues/832/events","html_url":"https://github.com/18F/cms-hitech-apd/pull/832","id":343234806,"node_id":"MDExOlB1bGxSZXF1ZXN0MjAyOTQ2MzA4","number":832,"title":"form field validation start","user":{"login":"brendansudol","id":1060893,"node_id":"MDQ6VXNlcjEwNjA4OTM=","avatar_url":"https://avatars2.githubusercontent.com/u/1060893?v=4","gravatar_id":"","url":"https://api.github.com/users/brendansudol","html_url":"https://github.com/brendansudol","followers_url":"https://api.github.com/users/brendansudol/followers","following_url":"https://api.github.com/users/brendansudol/following{/other_user}","gists_url":"https://api.github.com/users/brendansudol/gists{/gist_id}","starred_url":"https://api.github.com/users/brendansudol/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/brendansudol/subscriptions","organizations_url":"https://api.github.com/users/brendansudol/orgs","repos_url":"https://api.github.com/users/brendansudol/repos","events_url":"https://api.github.com/users/brendansudol/events{/privacy}","received_events_url":"https://api.github.com/users/brendansudol/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":2,"created_at":"2018-07-20T20:16:53Z","updated_at":"2018-07-20T21:00:49Z","closed_at":null,"author_association":"MEMBER","pull_request":{"url":"https://api.github.com/repos/18F/cms-hitech-apd/pulls/832","html_url":"https://github.com/18F/cms-hitech-apd/pull/832","diff_url":"https://github.com/18F/cms-hitech-apd/pull/832.diff","patch_url":"https://github.com/18F/cms-hitech-apd/pull/832.patch"},"body":"This adds the capability for client-side form field validation, on a per field basis, with validation occurring after interacting with the field (and thereafter on field change, though this is configurable).\r\n\r\nBehind the scenes, it utilizes [formik](https://github.com/jaredpalmer/formik) and [yup](https://github.com/jquense/yup), though it takes a bit of finagling to work on a per-field basis and jive with our redux store.\r\n\r\nThe input component API stays largely the same, though now there's one more prop, `validation`, which expects a `yup` schema instance. In time, we could perhaps store this yup schema for all fields in one central place (which could be shared with server-side) and then lookup the relevant field based on the name key but right now, i'm simply adding it in-line with the component. i.e.,\r\n\r\n```\r\n<InputValidate\r\n    name=\"firstName\"\r\n    label='First Name'\r\n    value={name} // i.e., from redux store\r\n    onChange={this.handleChange('firstName')} // i.e., dispatch action to update store\r\n    validation={Yup.string()\r\n        .min(2, 'C’mon, your name is longer than that')\r\n        .required('Name is required.')}\r\n/>\r\n```\r\n\r\nMaybe I'm completely overthinking this and maybe we don't need `formik` -- we're definitely not using it in the way intended :) -- but perhaps that's fine (I like the `touched` and `errors` objects that it generates, though we could create these on our own...).\r\n\r\nFor illustrative purposes, there's one field with validation wired up in the app (so far), the medicaid director name, and you can also play around with this at `/temp/misc` page.\r\n\r\nLet me know what you think, and also happy to scrap this approach and go with another if preferred.\r\n\r\n### This pull request is ready to merge when...\r\n- [ ] Tests have been updated (and all tests are passing)\r\n- [ ] This code has been reviewed by someone other than the original author\r\n"},"comment":{"url":"https://api.github.com/repos/18F/cms-hitech-apd/issues/comments/406725805","html_url":"https://github.com/18F/cms-hitech-apd/pull/832#issuecomment-406725805","issue_url":"https://api.github.com/repos/18F/cms-hitech-apd/issues/832","id":406725805,"node_id":"MDEyOklzc3VlQ29tbWVudDQwNjcyNTgwNQ==","user":{"login":"cms-eapd-bot","id":39502791,"node_id":"MDQ6VXNlcjM5NTAyNzkx","avatar_url":"https://avatars2.githubusercontent.com/u/39502791?v=4","gravatar_id":"","url":"https://api.github.com/users/cms-eapd-bot","html_url":"https://github.com/cms-eapd-bot","followers_url":"https://api.github.com/users/cms-eapd-bot/followers","following_url":"https://api.github.com/users/cms-eapd-bot/following{/other_user}","gists_url":"https://api.github.com/users/cms-eapd-bot/gists{/gist_id}","starred_url":"https://api.github.com/users/cms-eapd-bot/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/cms-eapd-bot/subscriptions","organizations_url":"https://api.github.com/users/cms-eapd-bot/orgs","repos_url":"https://api.github.com/users/cms-eapd-bot/repos","events_url":"https://api.github.com/users/cms-eapd-bot/events{/privacy}","received_events_url":"https://api.github.com/users/cms-eapd-bot/received_events","type":"User","site_admin":false},"created_at":"2018-07-20T21:00:49Z","updated_at":"2018-07-20T21:00:49Z","author_association":"NONE","body":"See this pull request in action: https://hitech-apd-pr832.app.cloud.gov/"}}
{"actor":{"display_login":"cms-eapd-bot"}}