powermail icon indicating copy to clipboard operation
powermail copied to clipboard

Change data-parsley-trigger from `change` to `blur`

Open Abdull opened this issue 4 years ago • 1 comments

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.

Abdull avatar Jun 15 '20 17:06 Abdull

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

Abdull avatar Jun 16 '20 09:06 Abdull