{"action":"opened","issue":{"url":"https://api.github.com/repos/Automattic/wp-calypso/issues/744","labels_url":"https://api.github.com/repos/Automattic/wp-calypso/issues/744/labels{/name}","comments_url":"https://api.github.com/repos/Automattic/wp-calypso/issues/744/comments","events_url":"https://api.github.com/repos/Automattic/wp-calypso/issues/744/events","html_url":"https://github.com/Automattic/wp-calypso/issues/744","id":118852461,"number":744,"title":" Framework: Make form validation consistent across all pages","user":{"login":"fabianapsimoes","id":1248436,"avatar_url":"https://avatars.githubusercontent.com/u/1248436?v=3","gravatar_id":"","url":"https://api.github.com/users/fabianapsimoes","html_url":"https://github.com/fabianapsimoes","followers_url":"https://api.github.com/users/fabianapsimoes/followers","following_url":"https://api.github.com/users/fabianapsimoes/following{/other_user}","gists_url":"https://api.github.com/users/fabianapsimoes/gists{/gist_id}","starred_url":"https://api.github.com/users/fabianapsimoes/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/fabianapsimoes/subscriptions","organizations_url":"https://api.github.com/users/fabianapsimoes/orgs","repos_url":"https://api.github.com/users/fabianapsimoes/repos","events_url":"https://api.github.com/users/fabianapsimoes/events{/privacy}","received_events_url":"https://api.github.com/users/fabianapsimoes/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/Framework","name":"Framework","color":"006b75"},{"url":"https://api.github.com/repos/Automattic/wp-calypso/labels/Signup","name":"Signup","color":"006b75"},{"url":"https://api.github.com/repos/Automattic/wp-calypso/labels/[Status]%20Needs%20Design%20Review","name":"[Status] Needs Design Review","color":"009800"},{"url":"https://api.github.com/repos/Automattic/wp-calypso/labels/[Type]%20Task","name":"[Type] Task","color":"0052cc"}],"state":"open","locked":false,"assignee":null,"milestone":null,"comments":0,"created_at":"2015-11-25T14:50:56Z","updated_at":"2015-11-25T14:50:56Z","closed_at":null,"body":"Originally reported by @rads.\r\n\r\nRight now the [NUX signup form](https://cloud.githubusercontent.com/assets/4389/7795793/0c4a782c-02d0-11e5-9a08-fa6cdb03f7f0.png) and the [checkout contact information form](https://cloud.githubusercontent.com/assets/4389/7795791/07807472-02d0-11e5-8971-2a62e659763c.png) use separate UIs for validating their fields. We'd like to combine these to keep the behavior consistent across the site. Here's a comment by @folletto (6217-gh-calypso-pre-oss) where he explains the ideal behavior that both should have:\r\n\r\n> The ideal approach is more similar to the one used in `/start`:\r\n\r\n> 1. Check the field I'm writing into **as I type** with a **loose** algorithm, but not before a certain **threshold** is reached (i.e. checking the phone number right after I type the first character is bad).  This same as-I-type code might also filter out automatically characters that aren't valid (this has to be tested tho, might be frustrating).\r\n> 2. Check the field I've _just_ deselected (`:blur`) for a **tighter** check (i.e. if the \"as I type\" filter checked just for length, this checks for formal match, like the correct full email format)\r\n> 3. The \"Next\" button is always active, but doesn't proceed until all the fields are checked. This is the only command that forces a tight check on all the fields.\r\n> 4. Error messages are contextual below / near the field that triggered them. So yes, there should be enough space for these errors to appear without making the form move.\r\n\r\n@drewblaisdell noted that if we're never going to disable the submit button, it is important that clicking the submit button always causes the application to react to an attempted submission somehow. Here's an example from Twitter:\r\n\r\n<img src=\"https://cloud.githubusercontent.com/assets/1130674/7825257/925f2ee0-03bf-11e5-8114-077e1c1038bc.gif\" />\r\n\r\ncc @scruffian @drewblaisdell @breezyskies "}}