71 lines
2.3 KiB
TypeScript
71 lines
2.3 KiB
TypeScript
|
/**
|
||
|
|
* For the full copyright and license information, please view the
|
||
|
|
* docs/licenses/LICENSE.txt file that was distributed with this source code.
|
||
|
|
*/
|
||
|
|
import * as EmailValidator from 'email-validator';
|
||
|
|
|
||
|
|
import ComponentsMap from '@components/components-map';
|
||
|
|
|
||
|
|
export interface EmailInputOptions extends OptionsObject {
|
||
|
|
emailInputSelector: string;
|
||
|
|
}
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Component to validate email input, it displays an error message when the email is invalid,
|
||
|
|
* and it prevents the form from being submitted until the email value is valid.
|
||
|
|
*/
|
||
|
|
export default class EmailInput {
|
||
|
|
private readonly options: EmailInputOptions;
|
||
|
|
|
||
|
|
constructor(options: Partial<EmailInputOptions> | undefined = undefined) {
|
||
|
|
this.options = {
|
||
|
|
...{
|
||
|
|
emailInputSelector: ComponentsMap.emailInput.inputSelector,
|
||
|
|
},
|
||
|
|
...options,
|
||
|
|
};
|
||
|
|
this.init();
|
||
|
|
}
|
||
|
|
|
||
|
|
private init(): void {
|
||
|
|
document.querySelectorAll<HTMLInputElement>(this.options.emailInputSelector).forEach((input) => {
|
||
|
|
input.addEventListener('change', () => {
|
||
|
|
this.toggleError(input, EmailValidator.validate(input.value));
|
||
|
|
});
|
||
|
|
const inputForm = input.closest('form');
|
||
|
|
|
||
|
|
if (inputForm) {
|
||
|
|
inputForm.addEventListener('submit', (event) => {
|
||
|
|
// Prevent submit when input value is still invalid
|
||
|
|
if (!EmailValidator.validate(input.value)) {
|
||
|
|
event.stopImmediatePropagation();
|
||
|
|
event.preventDefault();
|
||
|
|
this.toggleError(input, false);
|
||
|
|
input.focus();
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
private toggleError(input: HTMLInputElement, isValid: boolean): void {
|
||
|
|
const formGroup: HTMLElement | null = input.closest(ComponentsMap.formGroup);
|
||
|
|
input.classList.toggle(ComponentsMap.formControlInvalidClass, !isValid);
|
||
|
|
|
||
|
|
if (formGroup) {
|
||
|
|
let feedbackDiv = formGroup.querySelector(`div.${ComponentsMap.formControlInvalidFeedbackClass}`);
|
||
|
|
|
||
|
|
if (!isValid) {
|
||
|
|
// Create feedback div if it doesn't exist
|
||
|
|
if (!feedbackDiv) {
|
||
|
|
feedbackDiv = document.createElement('div');
|
||
|
|
feedbackDiv.classList.add(ComponentsMap.formControlInvalidFeedbackClass);
|
||
|
|
formGroup.append(feedbackDiv);
|
||
|
|
}
|
||
|
|
|
||
|
|
feedbackDiv.textContent = input.dataset.invalidMessage ?? 'Invalid email address.';
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
};
|