Код Cleave.js для ввода номера телефона. Ошибка на дублирующих элементах

Question

Я решил сделать форму для ввода номера более понятной: вводить только цифры и в пределах определенного лимита (для полей плагина contact form7, WP). Для этого я использовал приведенный ниже код (https://github.com/nosir/cleave.js). Все получилось и работает, кроме тех страниц, где элемент (id:phone) встречается дважды, или на разных страницах используется один и тот же блок с элементом. То есть код работает как надо на одной форме, но на дублирующейся форме возникает ошибка. Подскажите пожалуйста, как запустить код на всех страницах и формах, чтобы код выполнялся везде?

function enqueue_cleave(){
     wp_enqueue_script('cleave', get_stylesheet_directory_uri().'/js/cleave.min.js');
}
add_action('wp_enqueue_scripts', 'enqueue_cleave'); 

add_action('wp_footer', 'activate_cleave');

function activate_cleave(){
   if( is_page('') ){
?>

     <script type="text/javascript">
        document.addEventListener('DOMContentLoaded', () => {
        var phone = new Cleave('#phone', {
            numericOnly:true,
            prefix:'+',
            delimiter:'-',
            blocks:[5,4,4,2]
        });
    });

     </script>

<?php 
   }
}

Answer 1

Ошибка в вашей реализации заключается в том, что ID должен быть уникальным даже по своему определению. Вместо атрибута id следует использовать что-то иное, например, атрибут class. Если это по какой-то причине невозможно, то исправьте используемый при инициализации библиотеки селектор с #phone на [id="phone"].

document.addEventListener('DOMContentLoaded', () => {
    var phone = new Cleave('[id="phone"]', {
        numericOnly:true,
            prefix:'+',
            delimiter:'-',
            blocks:[5,4,4,2]
    });
});

БЛОГ НА HUSL

Код Cleave.js для ввода номера телефона. Ошибка на дублирующих элементах

Ответы (1 шт):