powermail
powermail copied to clipboard
Change data-parsley-trigger from `change` to `blur`
For a faster user feedback, I think it would be better to change data-parsley-trigger to blur at https://github.com/einpraegsam/powermail/blob/8.1.0/Classes/ViewHelpers/Validation/AbstractValidationViewHelper.php#L83 . This will give users direct feedback when input is incorrect.
With trigger set to change, as it currently is, an initially empty, but required input field does not have its validation triggered tabbing through this field.
Actually, validation on keyup, i.e., on each keypress is even better for my purposes, because it gives feedback as soon as something was typed.
In order to have it work with powermail ~7.4.0, I have the following workaround in my JavaScript:
// configure Parsley (used by Powermail) for better accessibility (see https://stackoverflow.com/a/22591965/923560 )
// until Parsley provides better accessibility out-of-the-box (see https://github.com/guillaumepotier/Parsley.js/issues/640 ).
window.ParsleyConfig = {
errorsWrapper: '<ul class="parsley-errors-list" aria-live="assertive"></ul>',
trigger: 'keyup',
validationThreshold: 0 // see https://github.com/guillaumepotier/Parsley.js/issues/1179
};
// document.addEventListener('DOMContentLoaded', function() { behaves slightly different, because data-parsley-trigger="keyup" is bound too late to be registered correctly
$(document).ready(function() {
// See https://github.com/einpraegsam/powermail/issues/547
document.querySelectorAll('[data-parsley-trigger]').forEach(function(element) {
element.setAttribute('data-parsley-trigger', 'keyup');
});
// Enhance Powermail / Parsley form accessibility by adding aria-invalid
// attributes during input validation,
// ( see http://parsleyjs.org/doc/index.html#psly-usage-global-configuration#events-list )
//until Parsley provides better accessibility out-of-the-box (see https://github.com/guillaumepotier/Parsley.js/issues/640 ).
window.Parsley.on('field:error', function() {
this.$element.attr('aria-invalid', 'true');
});
window.Parsley.on('field:success', function() {
this.$element.attr('aria-invalid', 'false');
});
});
// End of document-ready