[5.3] Added delay to form validation blur event

[JackKellyUK]

Pull Request for Issue #39419, #32692.

Summary of Changes

Added a tiny delay to the js form validation blur event, to prevent execution before the click event is fired on other fields/buttons.

Testing Instructions

1. Create a Users > Login Form menu item
2. Go to the menu item
3. Set the focus to the Username field (should be autofocused) and ensure the field is blank
4. Tick the 'Remember me' checkbox

Actual result BEFORE applying this Pull Request

User would need tick the checkbox twice

Expected result AFTER applying this Pull Request

Tick box functions as expected

Link to documentations

Please select:

• [ ] Documentation link for docs.joomla.org:

• [x] No documentation changes for docs.joomla.org needed

• [ ] Pull Request link for manual.joomla.org:

• [x] No documentation changes for manual.joomla.org needed

[richard67]

@JackKellyUK Could you fix the javascript cose style errors reported here https://ci.joomla.org/joomla/joomla-cms/61744/1/26 for the "javascript-cs" step?

+ npm run lint:js

> [email protected] lint:js
> eslint --config build/.eslintrc --ignore-pattern '/media/' --ext .es6.js,.es6,.vue .

/********/src/build/media_source/system/js/fields/validate.es6.js
  306:77  error  Requires a space after '{'   block-spacing
  306:99  error  Requires a space before '}'  block-spacing
  306:99  error  Missing semicolon            semi

✖ 3 problems (3 errors, 0 warnings)
  3 errors and 0 warnings potentially fixable with the `--fix` option.

[dgrammatiko]

@JackKellyUK would be nice to profile the script and figure out why the delay is needed. Adding a constant amount of delay might work on some machines but might fail on others depending on their CPU, etc, thus it would be better to figure out where the race condition occurs and maybe it would be possible to rewrite the script in such way (promises/async-await) to eliminate it regardless of cpu power of host.

[JackKellyUK]

@JackKellyUK would be nice to profile the script and figure out why the delay is needed. Adding a constant amount of delay might work on some machines but might fail on others depending on their CPU, etc, thus it would be better to figure out where the race condition occurs and maybe it would be possible to rewrite the script in such way (promises/async-await) to eliminate it regardless of cpu power of host.

I've outlined the issue here with solutions I can think of. I can't think of an efficient way of using a promise in combination with the blur event.

[dgrammatiko]

@JackKellyUK so according to your findings the problem comes from the insertion of the span for the invalid message. I would suggest to add the delay inside the validation method, something like:

  markInvalid(element, empty) {
    // Get a label
    const label = element.form.querySelector(`label[for="${element.id}"]`);

    element.classList.remove('form-control-success');
    element.classList.remove('valid');
    element.classList.add('form-control-danger');
    element.classList.add('invalid');
    element.parentNode.classList.remove('has-success');
    element.parentNode.classList.add('has-danger');
    element.setAttribute('aria-invalid', 'true');

    setTimeout(() => {
      // Display custom message
      let mesgCont;
      const message = element.getAttribute('data-validation-text');

      if (label) {
        mesgCont = label.querySelector('span.form-control-feedback');
      }

      if (!mesgCont) {
        const elMsg = document.createElement('span');
        elMsg.classList.add('form-control-feedback');
        if (empty && empty === 'checkbox') {
          elMsg.innerHTML = message !== null ? Joomla.sanitizeHtml(message) : Joomla.sanitizeHtml(Joomla.Text._('JLIB_FORM_FIELD_REQUIRED_CHECK'));
        } else if (empty && empty === 'value') {
          elMsg.innerHTML = message !== null ? Joomla.sanitizeHtml(message) : Joomla.sanitizeHtml(Joomla.Text._('JLIB_FORM_FIELD_REQUIRED_VALUE'));
        } else {
          elMsg.innerHTML = message !== null ? Joomla.sanitizeHtml(message) : Joomla.sanitizeHtml(Joomla.Text._('JLIB_FORM_FIELD_INVALID_VALUE'));
        }

        if (label) {
          label.appendChild(elMsg);
        }
      }
    }, 100);

    // Mark the Label as well
    if (label) {
      label.classList.add('invalid');
    }
  }

[dgrammatiko]

@JackKellyUK could you check if #39852 solves the problem?

[HLeithner]

This pull request has been automatically rebased to 4.3-dev.

[obuisard]

I have tested this item :white_check_mark: successfully on e1a2007c56ada19dab5e1b015f236259194644c4

---

_{This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/39838.}

[N6REJ]

I have tested this item :red_circle: unsuccessfully on e1a2007c56ada19dab5e1b015f236259194644c4

I was unable to detect a difference after patch was applied trying all 3 major browsers

---

_{This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/39838.}

[HLeithner]

This pull request has been automatically rebased to 4.4-dev.

[saschadube]

I have tested this item :white_check_mark: successfully on dde0191a6b1f5bd5638470be27cf123be88a5113

Works in Chrome, Firefox and Safari.

---

_{This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/39838.}

[sergejsteinz]

I have tested this item ✅ successfully. Hint: But you have to release the mouse button quickly, otherwise it jumps as before.

---

_{This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/39838.}

[richard67]

I have tested this item ✅ successfully. Hint: But you have to release the mouse button quickly, otherwise it jumps as before.

@sergejsteinz Please use the blue "Test this" button in the issue tracker to submit your test result so the test is properly counted. Leaving just a comment is not sufficient. Thanks in advance.

[richard67]

I've set the test result for @sergejsteinz because it was not counted before as he hasn't used the "Test this" button to submit the result.

[richard67]

RTC

---

_{This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/39838.}