Динамическая инициализация нескольких полей ввода в плагине - PullRequest
Новая
       33

Динамическая инициализация нескольких полей ввода в плагине

1 голос
/ 22 июня 2019

У меня много форм на одной странице. Каждая из форм должна иметь поле номера телефона. Эти поля управляются JS plug-in.

Итак, я получаю большое количество полей, которые должны быть правильно инициализированы. Если я сделаю это вручную, я получу: формы * поля ввода телефона = количество инициализаций.

В данный момент у меня работает только самая первая область. Другое не инициализируется.

Моя разметка выглядит как : 

<input type="tel" class="phone_flag" name="phone_tab1[main]" required="">
<input type="tel" class="phone_flag" name="phone_tab2[main]" required="">
<input type="tel" class="phone_flag" name="phone_tab3[main]" required="">
xxx
...

Я получил совет: для правильной работы мне нужно иметь querySelectorAll с forEach петлей. Затем я должен вызвать функцию PhoneDisplay, не передавать имя класса, вместо этого передать сам элемент. Затем инициализируйте плагин для этого элемента напрямую.

Я только пришел к этому решению, но оно только начало первого элемента.

Код инициализации JS : 

   document.querySelectorAll('.phone_flag').forEach(el => { 
        PhoneDisplay(el.className);     
    });

    function PhoneDisplay(ClassName){

      var input = document.querySelector('.' + `${ClassName}`);   
      var iti = window.intlTelInput(input, {
          hiddenInput: "full",
          initialCountry: "auto",
          geoIpLookup: function(callback) {
            $.get('proxy.php', function() {}).always(function(resp) {
              var countryCode = (resp && resp.country) ? resp.country : "";
              callback(countryCode);
            });
          },    
          hiddenInput: "full_phone",
          utilsScript: "intlTelInput/js/utils.js"
      });

        var reset = function() {
          input.classList.remove("error");
          errorMsg.innerHTML = "";
          errorMsg.classList.add("hide");
          validMsg.classList.add("hide");
        };

        input.addEventListener('blur', function() {
          reset();
          if (input.value.trim()) {
            if (iti.isValidNumber()) {
              validMsg.classList.remove("hide");
            } else {
              input.classList.add("error");
              var errorCode = iti.getValidationError();
              errorMsg.innerHTML = errorMap[errorCode];
              errorMsg.classList.remove("hide");
            }
          }
        });

        input.addEventListener('change', reset);
        input.addEventListener('keyup', reset);           
    }

1 Ответ

0 голосов
/ 23 июня 2019

document.querySelector возвращает первый запрос, поэтому var input всегда является первым вводом.Вам нужно просто передать сам элемент в цикле forEach: PhoneDisplay(el);, а затем function PhoneDisplay(input) и удалить строку 'var input ='.

...