New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Improve validation and presentation of analytics form #1299

Merged
merged 7 commits into from Aug 1, 2018

Conversation

Projects
None yet
2 participants
@westonruter
Member

westonruter commented Aug 1, 2018

When reviewing #1296 I was inspired with some quick wins to greatly facilitate the input of analytics data, which I expect will also lessen a lot of support topics on the issue.

  • Use HTML5 form validation to prevent invalid JSON from being submitted and then lost when the page reloads.
  • Parse the textarea value as JSON at input event to ensure JSON object is supplied.
  • Add required attribute to the type and config fields to prevent empty values from being submitted.
  • Add red border around invalid textures.
  • Pretty-print saved JSON when rendering a config.
  • Let initial value of analytics textarea be an empty object {}.
  • Do client-side JSON validation.
  • Add monospace font to texture.
  • Add {...} as placeholder for textarea.
  • Add intro text to explain required format for analytics JSON config. Let text be expanded when there are no entries saved.
  • Add googleanalytics placeholder for type.

Before:

image

image

After:

image

In the future we could go a step further and add the CodeMirror editor: https://make.wordpress.org/core/2017/10/22/code-editing-improvements-in-wordpress-4-9/

westonruter added some commits Aug 1, 2018

Improve validation and presentation of analytics form
* Use HTML5 form validation to prevent invalid JSON from being sent.
* Parse the textarea value as JSON at input event to ensure JSON object is supplied.
* Add 'required' attribute to prevent empty values from being submitted.
* Add red border around invalid textures.
* Pretty-print saved JSON when rendering a config.
* Let initial value of analytics textarea be an empty object {}.
* Do client-side JSON validation.
* Add monospace font to texture.
* Add {...} as placeholder for textarea.

@westonruter westonruter added this to the v1.0 milestone Aug 1, 2018

@westonruter westonruter requested a review from amedina Aug 1, 2018

westonruter added some commits Aug 1, 2018

@amedina

amedina approved these changes Aug 1, 2018

This is great. Ship it!

@westonruter westonruter merged commit 7d8a76f into develop Aug 1, 2018

2 checks passed

continuous-integration/travis-ci/pr The Travis CI build passed
Details
continuous-integration/travis-ci/push The Travis CI build passed
Details

@westonruter westonruter deleted the fix/analytics-form-validation branch Aug 1, 2018

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment