Кастомне повідомлення валідації для вебформи в Drupal 9

Новий день - нове завдання в Drupal.

В нас є сайт на Drupal 9, де потрібно додати паттерн для input.

Додавання самого шаблону до полі вводу веб-форми не є такою складною задачею, але коли мова йде про повідомлення про помилку, виявляється, що неможливо змінити його текст через веб-форму. Для цього ми використовуватимемо код jquery.

Отже, для звичайної статичної форми ми створюємо файл scriptname.js із приблизно таким вмістом:

(function ($, Drupal) {
    Drupal.behaviors.addInputAttributes = {
      attach: function (context, settings) {
        var input = document.getElementById('id_of_our_input');
       
        input.oninvalid = function(event) {
            event.target.setCustomValidity('Please enter the number in the format XXX-XX-XXXXX');
        }
      }
    };
  })(jQuery, Drupal);

Але якщо нам потрібно змінити текст помилки поля, яке знаходиться в спливаючому вікні, нам треба незначно змінити наш скрипт, оскільки без цього наш скрипт не буде працювати. Коли він завантажується, він не побачить поле з нашим ID і просто видасть помилку. Тому ми створюємо script.js.

(function ($, Drupal) {
    Drupal.behaviors.addInputAttributes = {
      attach: function (context, settings) {
        $('button.info-button', context).once('addInputAttributes').on('click', function() {
          setTimeout(function() {
            var product_telinput = document.getElementById('id_of_our_input');
            if (product_telinput) {
              product_telinput.oninvalid = function(event) {
                event.target.setCustomValidity('Please enter the number in the format XXX-XX-XXXXX');
              };
            }
          }, 500);
        });
      }
    };
  })(jQuery, Drupal);

Ось ми спершу прописуємо, що все, що відбувається, стосується лише після натискання на кнопки із необхідним класом. Ми також додаємо таймер. Залежно від швидкості підключення користувача, поле з необхідним ідентифікатором може завантажуватися не так швидко, як нам б хотілося, тому після натискання кнопки розпочинається відлік 500 мс, після чого ми звертаємося лише до нашого поля.