Commit a449b9b8 authored by Bryce Johnson's avatar Bryce Johnson

Refactor gl field errors for simpler state management.

parent 768cd071
......@@ -13,79 +13,123 @@
*
* */
const fieldErrorClass = 'gl-field-error';
const fieldErrorSelector = `.${fieldErrorClass}`;
const errorMessageClass = 'gl-field-error';
const inputErrorClass = 'gl-field-error-outline';
class GlFieldErrors {
constructor(form) {
this.form = $(form);
this.initValidators();
class GlFieldError {
constructor({ input, form }) {
this.inputElement = $(input);
this.inputDomElement = this.inputElement.get(0);
this.form = form;
this.errorMessage = this.inputElement.attr('title') || 'This field is required.';
this.fieldErrorElement = $(`<p class='${errorMessageClass} hide'>${ this.errorMessage }</p>`);
this.state = {
valid: false,
empty: true
};
this.initFieldValidation();
}
initValidators () {
this.inputs = this.form.find(':input:not([type=hidden])').toArray();
this.inputs.forEach((input) => {
$(input).off('invalid').on('invalid', this.handleInvalidInput.bind(this));
});
this.form.on('submit', this.catchInvalidFormSubmit);
initFieldValidation() {
// hidden when injected into DOM
$input.after(this.fieldErrorElement);
this.inputElement.off('invalid').on('invalid', this.handleInvalidInput.bind(this));
}
/* Neccessary because Safari & iOS quietly allow form submission when form is invalid */
catchInvalidFormSubmit (event) {
if (!event.currentTarget.checkValidity()) {
event.preventDefault();
// Prevents disabling of invalid submit button by application.js
event.stopPropagation();
renderValidity() {
this.setClearState();
if (this.state.valid) {
this.setValidState();
}
if (this.state.empty) {
this.setEmptyState();
}
if (!this.state.valid) {
this.setInvalidState();
}
this.form.focusOnFirstInvalid.apply(this);
}
handleInvalidInput (event) {
handleInvalidInput(event) {
event.preventDefault();
this.updateFieldValidityState(event);
const $input = $(event.currentTarget);
this.state.valid = true;
this.state.empty = false;
this.renderValidity();
// For UX, wait til after first invalid submission to check each keyup
$input.off('keyup.field_validator')
.on('keyup.field_validator', this.updateFieldValidityState.bind(this));
this.inputElement.off('keyup.field_validator')
.on('keyup.field_validator', this.updateValidityState.bind(this));
}
displayFieldValidity (target, isValid) {
const $input = $(target).removeClass(inputErrorClass);
const $existingError = $input.siblings(fieldErrorSelector);
const alreadyInvalid = !!$existingError.length;
const implicitErrorMessage = $input.attr('title');
const $errorToDisplay = alreadyInvalid ? $existingError.detach() : $(`<p class="${fieldErrorClass}">${implicitErrorMessage}</p>`);
getInputValidity() {
return this.inputDomElement.validity.valid;
}
if (!isValid) {
$input.after($errorToDisplay);
$input.addClass(inputErrorClass);
}
updateValidityState() {
const inputVal = this.inputElement.val();
this.state.empty = !!inputVal.length;
this.state.valid = this.getInputValidity;
this.updateFieldSiblings($errorToDisplay, isValid);
this.renderValidity();
}
updateFieldSiblings($target, isValid) {
const siblings = $target.siblings(`p${fieldErrorSelector}`);
return isValid ? siblings.show() : siblings.hide();
setValidState() {
return this.setClearState();
}
setEmptyState() {
return this.setClearState();
}
setInvalidState() {
$input.addClass(inputErrorClass);
return this.$fieldErrorElement.show();
}
setClearState() {
$input.removeClass(inputErrorClass);
return this.fieldErrorElement.hide();
}
checkFieldValidity(target) {
return target.validity.valid;
}
}
updateFieldValidityState(event) {
const target = event.currentTarget;
const isKeyup = event.type === 'keyup';
const isValid = this.checkFieldValidity(target);
class GlFieldErrors {
constructor(form) {
this.form = $(form);
this.initValidators();
}
this.displayFieldValidity(target, isValid);
initValidators () {
// select all non-hidden inputs in form
const form = this.form;
this.inputs = this.form.find(':input:not([type=hidden])')
.toArray()
.map((input) => new GlFieldError({ input, form }));
this.form.on('submit', this.catchInvalidFormSubmit);
}
// prevent changing focus while user is typing.
if (!isKeyup) {
this.focusOnFirstInvalid.apply(this);
/* Neccessary to prevent intercept and override invalid form submit
* because Safari & iOS quietly allow form submission when form is invalid
* and prevents disabling of invalid submit button by application.js */
catchInvalidFormSubmit (event) {
if (!event.currentTarget.checkValidity()) {
event.preventDefault();
event.stopPropagation();
}
}
......
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