Save query form validation on blur

[Bargs]

Summary

This PR changes the save query form to only validate its inputs on blur. Previously we validated on every change. This could lead to the errors flashing in the user's face before they're done typing a valid input. For example, we allow spaces in the name field, but not at the beginning or end of the name. So if a user typed this is a long name with spaces they would see the error pop up every time they type a space, only to have it disappear when they type the next letter.

My only concern with the new implementation is that after fixing the error, the user must know to click or tab out of the input to re-run the validation and re-enable the save button. @elastic/kibana-design do we have any best practices for solving this in a better way?

Checklist

Use strikethroughs to remove checklist items you don't feel are applicable to this PR.

- [ ] This was checked for cross-browser compatibility, including a check against IE11
- [ ] Any text added follows EUI's writing guidelines, uses sentence case text and includes i18n support
- [ ] Documentation was added for features that require explanation or tutorials

• Unit or functional tests were updated or added to match the most common scenarios
  - [ ] This was checked for keyboard-only and screenreader accessibility

For maintainers

- [ ] This was checked for breaking API changes and was labeled appropriately
- [ ] This includes a feature addition or change that requires a release note and was labeled appropriately

[elasticmachine]

Pinging @elastic/kibana-app

[elasticmachine]

💔 Build Failed

• continuous-integration/kibana-ci/pull-request

[Bargs]

Realized I was missing an easy solution yesterday. I simply re-validate on every render if the form currently has errors. So errors will only appear on blur, but they will disappear as soon as the user has fixed them.

[TinaHeiligers]

I pulled in the code and tested it in Chrome, Firefox and Safari. The change works well and reduces the visual noise while filling in the saved query form.
The failed functional test is a result of form validation happening only after the name field is blurred and can be fixed as follows in test/functional/services/saved_query_management_component.js:

async saveNewQueryWithNameError(name) {
      await this.openSavedQueryManagementComponent();
      await testSubjects.click('saved-query-management-save-button');
      if (name) {
        await testSubjects.setValue('saveQueryFormTitle', name);
      }
      await testSubjects.setValue('saveQueryFormDescription', 'description'); // <--- add this
      const saveQueryFormSaveButtonStatus = await testSubjects.isEnabled('savedQueryFormSaveButton');
      expect(saveQueryFormSaveButtonStatus).to.not.eql(true);
      await testSubjects.click('savedQueryFormCancelButton');
    }

[TinaHeiligers]

This should also work.

[elasticmachine]

💚 Build Succeeded

• continuous-integration/kibana-ci/pull-request