{"action":"created","issue":{"url":"https://api.github.com/repos/Automattic/wp-calypso/issues/3154","repository_url":"https://api.github.com/repos/Automattic/wp-calypso","labels_url":"https://api.github.com/repos/Automattic/wp-calypso/issues/3154/labels{/name}","comments_url":"https://api.github.com/repos/Automattic/wp-calypso/issues/3154/comments","events_url":"https://api.github.com/repos/Automattic/wp-calypso/issues/3154/events","html_url":"https://github.com/Automattic/wp-calypso/pull/3154","id":132033587,"number":3154,"title":"Checkout: Domains: Use Inline Form Validation for Contact Information Form","user":{"login":"umurkontaci","id":991022,"avatar_url":"https://avatars.githubusercontent.com/u/991022?v=3","gravatar_id":"","url":"https://api.github.com/users/umurkontaci","html_url":"https://github.com/umurkontaci","followers_url":"https://api.github.com/users/umurkontaci/followers","following_url":"https://api.github.com/users/umurkontaci/following{/other_user}","gists_url":"https://api.github.com/users/umurkontaci/gists{/gist_id}","starred_url":"https://api.github.com/users/umurkontaci/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/umurkontaci/subscriptions","organizations_url":"https://api.github.com/users/umurkontaci/orgs","repos_url":"https://api.github.com/users/umurkontaci/repos","events_url":"https://api.github.com/users/umurkontaci/events{/privacy}","received_events_url":"https://api.github.com/users/umurkontaci/received_events","type":"User","site_admin":false},"labels":[{"url":"https://api.github.com/repos/Automattic/wp-calypso/labels/Checkout","name":"Checkout","color":"006b75"},{"url":"https://api.github.com/repos/Automattic/wp-calypso/labels/Domains","name":"Domains","color":"006b75"},{"url":"https://api.github.com/repos/Automattic/wp-calypso/labels/[Status]%20Needs%20Author%20Reply","name":"[Status] Needs Author Reply","color":"eb6420"}],"state":"open","locked":false,"assignee":{"login":"umurkontaci","id":991022,"avatar_url":"https://avatars.githubusercontent.com/u/991022?v=3","gravatar_id":"","url":"https://api.github.com/users/umurkontaci","html_url":"https://github.com/umurkontaci","followers_url":"https://api.github.com/users/umurkontaci/followers","following_url":"https://api.github.com/users/umurkontaci/following{/other_user}","gists_url":"https://api.github.com/users/umurkontaci/gists{/gist_id}","starred_url":"https://api.github.com/users/umurkontaci/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/umurkontaci/subscriptions","organizations_url":"https://api.github.com/users/umurkontaci/orgs","repos_url":"https://api.github.com/users/umurkontaci/repos","events_url":"https://api.github.com/users/umurkontaci/events{/privacy}","received_events_url":"https://api.github.com/users/umurkontaci/received_events","type":"User","site_admin":false},"milestone":null,"comments":12,"created_at":"2016-02-08T01:35:55Z","updated_at":"2016-02-19T20:58:00Z","closed_at":null,"pull_request":{"url":"https://api.github.com/repos/Automattic/wp-calypso/pulls/3154","html_url":"https://github.com/Automattic/wp-calypso/pull/3154","diff_url":"https://github.com/Automattic/wp-calypso/pull/3154.diff","patch_url":"https://github.com/Automattic/wp-calypso/pull/3154.patch"},"body":"This fixes #2866.\r\n\r\nWith this change, we are now using inline error messages instead of showing all the error messages at the top.\r\n\r\nScreenshot\r\n-\r\n![image](https://cloud.githubusercontent.com/assets/991022/12877032/07aa75e4-cdc1-11e5-99ad-65e0500bf6b2.png)\r\n\r\n\r\nTesting\r\n-\r\n\r\n- Go try to buy a domain and land on the contact information form.\r\n- Ensure the form behaves as before, but the errors show at the bottom of every field instead of the top.\r\n\r\n/cc: @klimeryk @aidvu "},"comment":{"url":"https://api.github.com/repos/Automattic/wp-calypso/issues/comments/186404774","html_url":"https://github.com/Automattic/wp-calypso/pull/3154#issuecomment-186404774","issue_url":"https://api.github.com/repos/Automattic/wp-calypso/issues/3154","id":186404774,"user":{"login":"umurkontaci","id":991022,"avatar_url":"https://avatars.githubusercontent.com/u/991022?v=3","gravatar_id":"","url":"https://api.github.com/users/umurkontaci","html_url":"https://github.com/umurkontaci","followers_url":"https://api.github.com/users/umurkontaci/followers","following_url":"https://api.github.com/users/umurkontaci/following{/other_user}","gists_url":"https://api.github.com/users/umurkontaci/gists{/gist_id}","starred_url":"https://api.github.com/users/umurkontaci/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/umurkontaci/subscriptions","organizations_url":"https://api.github.com/users/umurkontaci/orgs","repos_url":"https://api.github.com/users/umurkontaci/repos","events_url":"https://api.github.com/users/umurkontaci/events{/privacy}","received_events_url":"https://api.github.com/users/umurkontaci/received_events","type":"User","site_admin":false},"created_at":"2016-02-19T20:58:00Z","updated_at":"2016-02-19T20:58:00Z","body":"@klimeryk @breezyskies @mikeshelton1503 Thanks for the inputs. We're now scrolling and focusing to the first error when you click submit and there's an error. Just `.focus()` wasn't doing it properly due to fixed topbar and most of the field was staying underneath the topbar, so I created a script that would calculate if the field is *competely* visible to the user and if not, it would scroll it into a more central position but it is a noop when the field is visible to prevent unnecessary scrolls.\r\n\r\nMy testings has shown it's actually working properly but you're welcome to test it on different scenarios :)\r\n\r\nOn changing the copies of the messages, I know it's not ideal but they require quite a bit changes, so I'd rather leave it out of this PR and create a follow up issue. "}}