Skip to content
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

Refactor form verifiers API. #9798

Merged
merged 3 commits into from Jun 12, 2017
Merged

Refactor form verifiers API. #9798

merged 3 commits into from Jun 12, 2017

Conversation

cvializ
Copy link
Contributor

@cvializ cvializ commented Jun 8, 2017

This implements the suggestions @dvoytenko gave for the form verification API.

  • No config block, no verification groups
  • Verification behavior is triggered by a verify-xhr attribute functioning similarly to action-xhr
  • The verification request must be sent after every change event. The groups allowed us to limit the requests to only send when a group was complete

Closes #9696

@cvializ cvializ changed the title Refactor form verifiers API. Move checkUserValidity. Refactor form verifiers API. Jun 8, 2017
/** @const @private {?string} */
this.xhrVerify_ = this.form_.getAttribute('verify-xhr');
if (this.xhrVerify_) {
assertHttpsUrl(this.xhrVerify_, this.form_, 'verify-xhr');
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

let's refactor to share validation logic between action-xhr and this.

this.form_.addEventListener('blur', e => {
checkUserValidityAfterInteraction_(dev().assertElement(e.target));
this.validator_.onBlur(e);
}, true);

const cleanup = () => {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

cleanup too generic given this methods deals with non-verifier code as well. Maybe afterVerifierCommit ?


/**
* Send a request to the form's verify endpoint.
* @private
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

add return type.

* @param {string} url
* @param {string} method
* @param {!Object<string, string>=} opt_extraFields
* @private
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ditto return type

isDirty_() {
const form = this.form_;
for (let i = 0; i < form.elements.length; i++) {
const field = form.elements[i];
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think we can break early for disable elements, they won't get submitted anyway.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Done.

@cvializ cvializ merged commit f464a08 into ampproject:master Jun 12, 2017
@cvializ cvializ deleted the cv-form branch June 12, 2017 22:05
isDirty_() {
const form = this.form_;
for (let i = 0; i < form.elements.length; i++) {
const field = form.elements[i];
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Whoo, this is going to be a slow loop. This'll recreate elements HTMLFormControlsCollection on every iteration.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ah I didn't consider it'd be computed every access. I'll cache it in a variable outside the loop.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Successfully merging this pull request may close these issues.

None yet

5 participants