Commit 2f470a62 authored by Fatih Acet's avatar Fatih Acet

Merge branch 'scope-input-errors' into 'master'

Stop injecting field errors where they won't be used.

## What does this MR do?

Filters the form elements which gl_field_errors validates, excluding input types button, submit and checkbox.

## Why was this MR needed?

This won't make a difference in UX, but I just noticed that we are currently validating and injecting errors into the DOM for all non-hidden inputs. Doing so is unnecessary, and could introduce performance problems on forms with larger numbers of inputs.

## Does this MR meet the acceptance criteria?

- [x] All builds are passing
- [x] Conform by the [merge request performance guides](http://docs.gitlab.com/ce/development/merge_request_performance_guidelines.html)
- [x] Conform by the [style guides](https://gitlab.com/gitlab-org/gitlab-ce/blob/master/CONTRIBUTING.md#style-guides)
- [x] Branch has no merge conflicts with `master` (if it does - rebase it please)
- [x] [Squashed related commits together](https://git-scm.com/book/en/Git-Tools-Rewriting-History#Squashing-Commits)

See merge request !6929
parents 99eb1543 06564f9e
...@@ -137,8 +137,11 @@ ...@@ -137,8 +137,11 @@
} }
initValidators () { initValidators () {
// select all non-hidden inputs in form // register selectors here as needed
this.state.inputs = this.form.find(':input:not([type=hidden])').toArray() const validateSelectors = [':text', ':password', '[type=email]']
.map((selector) => `input${selector}`).join(',');
this.state.inputs = this.form.find(validateSelectors).toArray()
.filter((input) => !input.classList.contains(customValidationFlag)) .filter((input) => !input.classList.contains(customValidationFlag))
.map((input) => new GlFieldError({ input, formErrors: this })); .map((input) => new GlFieldError({ input, formErrors: this }));
......
...@@ -11,12 +11,12 @@ ...@@ -11,12 +11,12 @@
this.fieldErrors = new global.GlFieldErrors($form); this.fieldErrors = new global.GlFieldErrors($form);
}); });
it('should properly initialize the form', function() { it('should select the correct input elements', function() {
expect(this.$form).toBeDefined(); expect(this.$form).toBeDefined();
expect(this.$form.length).toBe(1); expect(this.$form.length).toBe(1);
expect(this.fieldErrors).toBeDefined(); expect(this.fieldErrors).toBeDefined();
const inputs = this.fieldErrors.state.inputs; const inputs = this.fieldErrors.state.inputs;
expect(inputs.length).toBe(5); expect(inputs.length).toBe(4);
}); });
it('should ignore elements with custom error handling', function() { it('should ignore elements with custom error handling', function() {
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment