diff options
Diffstat (limited to 'app/assets/javascripts/pages/sessions/new/email_format_validator.js')
-rw-r--r-- | app/assets/javascripts/pages/sessions/new/email_format_validator.js | 46 |
1 files changed, 46 insertions, 0 deletions
diff --git a/app/assets/javascripts/pages/sessions/new/email_format_validator.js b/app/assets/javascripts/pages/sessions/new/email_format_validator.js new file mode 100644 index 00000000000..6dcf3b50dca --- /dev/null +++ b/app/assets/javascripts/pages/sessions/new/email_format_validator.js @@ -0,0 +1,46 @@ +import InputValidator from '~/validators/input_validator'; + +// It checks if email contains at least one character, number or whatever except +// another "@" or whitespace before "@", at least two characters except +// another "@" or whitespace after "@" and one dot in between +const emailRegexPattern = /[^@\s]+@[^@\s]+\.[^@\s]+/; +const hintMessageSelector = '.validation-hint'; +const warningMessageSelector = '.validation-warning'; + +export default class EmailFormatValidator extends InputValidator { + constructor(opts = {}) { + super(); + + const container = opts.container || ''; + + document + .querySelectorAll(`${container} .js-validate-email`) + .forEach((element) => + element.addEventListener('keyup', EmailFormatValidator.eventHandler.bind(this)), + ); + } + + static eventHandler(event) { + const inputDomElement = event.target; + + EmailFormatValidator.setMessageVisibility(inputDomElement, hintMessageSelector); + EmailFormatValidator.setMessageVisibility(inputDomElement, warningMessageSelector); + EmailFormatValidator.validateEmailInput(inputDomElement); + } + + static validateEmailInput(inputDomElement) { + const validEmail = inputDomElement.checkValidity(); + const validPattern = inputDomElement.value.match(emailRegexPattern); + + EmailFormatValidator.setMessageVisibility( + inputDomElement, + warningMessageSelector, + validEmail && !validPattern, + ); + } + + static setMessageVisibility(inputDomElement, messageSelector, isVisible = false) { + const messageElement = inputDomElement.parentElement.querySelector(messageSelector); + messageElement.classList.toggle('hide', !isVisible); + } +} |