app/webpack/javascripts/modules/Modules.HideErrorOnChange.js
moj.Modules.HideErrorOnChange = {
railsErrorClassName: 'field_with_errors',
gdsErrorClassName: 'form-group-error',
config: [{
delegate: '.form-group.field_with_errors',
wrapperClassName: 'field_with_errors',
messageSelector: '.error'
}, {
delegate: '.dropdown_field_with_errors',
wrapperClassName: 'dropdown_field_with_errors',
messageSelector: '.error'
}, {
delegate: 'fieldset.gov_uk_date.error',
wrapperClassName: 'error',
messageSelector: 'ul'
}, {
delegate: '.gov_uk_date.form-group-error',
wrapperClassName: 'error',
messageSelector: 'ul'
}, {
delegate: '.dropdown_field_with_errors.has-select',
wrapperClassName: 'dropdown_field_with_errors',
messageSelector: '.error',
eventSelector: 'select'
}],
init: function () {
this.bindListeners()
},
removeNestedErrorWrappers: function ($el) {
const wrappers = $el.find('.' + this.railsErrorClassName)
$el.find('.form-control-error').removeClass('form-control-error')
wrappers.removeClass(this.railsErrorClassName)
},
removeClassName: function ($el, className) {
this.removeNestedErrorWrappers($el)
return $el.removeClass(className)
},
removeBySelector: function ($el, selector) {
return $el.find(selector).remove()
},
bindListeners: function () {
const self = this
let context
this.config.forEach(function (opt) {
context = opt.eventSelector || 'input'
$(opt.delegate).one('click', context, function (e) {
const $el = $(e.delegateTarget)
self.removeClassName($el, opt.wrapperClassName)
self.removeClassName($el, 'form-group-error')
self.removeBySelector($el, opt.messageSelector)
})
// mainly for FF
$(opt.delegate).one('focus', context, function (e) {
$(e.target).trigger('click')
})
$(opt.delegate).one('change', context, function (e) {
$(e.target).trigger('click')
})
})
}
}