Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 04.11.2019, 21:09
Профессор
Отправить личное сообщение для Julia1991 Посмотреть профиль Найти все сообщения от Julia1991
 
Регистрация: 13.08.2017
Сообщений: 161

Маска для поля телефон для разных стран
Нужно чтоб вместо placeholder в поле выводилась маска и она должна подстраиваться под выбранную страну как это происходит с placeholder. Я же не могу написать варианты масок под каждую страну, как вариант взять пример placeholder, но я не знаю как это сделать

Последний раз редактировалось Julia1991, 05.11.2019 в 00:17.
Ответить с цитированием
  #2 (permalink)  
Старый 05.11.2019, 00:43
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,648

Вот теперь списки работают и стало понятно чего нужно - выбором списка страны выбирать нужное и в поле телефона?
Ответить с цитированием
  #3 (permalink)  
Старый 05.11.2019, 11:37
Профессор
Отправить личное сообщение для Julia1991 Посмотреть профиль Найти все сообщения от Julia1991
 
Регистрация: 13.08.2017
Сообщений: 161

Нет, нужно добавить маску в поле телефона, маска для каждой страны разная, как пример подтягивать значение Placeholder
Ответить с цитированием
  #4 (permalink)  
Старый 05.11.2019, 11:39
Профессор
Отправить личное сообщение для Julia1991 Посмотреть профиль Найти все сообщения от Julia1991
 
Регистрация: 13.08.2017
Сообщений: 161

Еще другой вопрос, при нажатии на кнопку отправить получаю в консоле ошибку An invalid form control with name='sub_cat' is not focusable. Если добавить к форме "novalidate" то ошибка проподает, но reguired не срабатывает для полей
<form id="fixed-form" class="forms1" name="testForm">
                    <input required="" type="text" class="userName" name="userName" placeholder="Name:*">
                    <input required="" type="email" class="email-f" name="email" placeholder=" E-mail:*">
                    <input required="" type="tel" class="tel" name="tel" placeholder=" Phone:*">
                    <!--<input required type='text' class='number' name='number' placeholder=' : '>-->
                    <select name="category" id="mark" onchange="select()"><option disabled="" selected="">Select category</option><option>Accessories for the snails farm</option><option>Canned snails</option><option>Cooked snails</option><option>Dishes from snails</option><option>Frozen snails</option><option>Live snails</option><option>Other product</option><option>Snail Slime</option></select><div id="submit-ajax-cat"></div>            <script>
                function select() {
                    var x = document.getElementById("mark").value;
                    jQuery.ajax({
                        url: "/wp-admin/admin-ajax.php",
                        method: 'post',
                        data: {
                            action: 'ajax_get_menu_subcategories_shop',
                            name: x,

                        },
                        success: function (response) {
                            jQuery('#submit-ajax-cat').html(response);
                        }
                    });
                }
            </script>
             <button class="submit" type="submit">Order</button><div id="submit-ajax-res"></div></form>
Ответить с цитированием
  #5 (permalink)  
Старый 05.11.2019, 12:15
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,648

Сообщение от Julia1991
нужно добавить маску в поле телефона
Я же писал об атрибуте pattern, а ваше поле телефона использует какой-то плагин, который и помещает подсказку (placeholder) в поле. Не проблема из этой подсказки сформировать рег. выражение для этого атрибута и добавить его полю. Например, если в этом плагине есть события, серди которых есть изменение, и в функции которого поле доступно как this, то:
this.pattern = this.placeholder.replace(/_/g,'\\d')

Но это в общем то будет не маска, которую надо полагать вы имеете ввиду, то есть когда при вводе для формата +250 ___ ___ ___ +250 будет отображаться и не изменяться, а курсор при вводе будет переходить в позиции указанные маской. Для этого нужен плагин, в вашем случае позволяющий определить правила для множества стран. Есть ли таковые я не в курсе. Если нет, то плагин вами применяемый дорабатывать или писать отдельный скрипт дополняющий этот сервис полю.

А без такого решения держать в голове всякие вариации форматов ввода, это больше путаницы чем пользы для клиента.

К тому же, ели у вас можно выбрать из списка страну при вводе телефона и из списка стран, то изменения в этих полях должны быть связаны, то есть выбор страны в одном поле приводил установки этой же страны в другом. У вас это сделать затруднительно.

Сообщение от Julia1991
получаю в консоле ошибку An invalid form control with name='sub_cat'
И где в этой форме это поле?
Ответить с цитированием
  #6 (permalink)  
Старый 05.11.2019, 12:19
Профессор
Отправить личное сообщение для Julia1991 Посмотреть профиль Найти все сообщения от Julia1991
 
Регистрация: 13.08.2017
Сообщений: 161

An invalid form control with name='sub_cat' эту ошибку исправила

Последний раз редактировалось Julia1991, 05.11.2019 в 12:22.
Ответить с цитированием
  #7 (permalink)  
Старый 05.11.2019, 12:27
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,648

<input required="" style="display: none;" class="sub-menu-form sub-cat" type="checkbox" id="Marinated snails" name="sub-cat" value="Marinated snails"> - имя идентификатора не может содержать пробелов! Ошибка гласит о sub_cat, а представленные поля имеют имя sub-cat.

И не странно ли для флажка required?
Ответить с цитированием
  #8 (permalink)  
Старый 05.11.2019, 12:57
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,648

Сообщение от Julia1991
эту ошибку исправила
А как с логической ошибкой - два поля типа checkbox с одним именем и с обязательным выбором? Тут либо тип radio, тогда все верно, либо не должно быть обязательного выбора и имена разные.

И об имени идентификатора. Вот так все вроде бы окейно:

<html>
<body>
<input required="" class="sub-menu-form sub-cat" type="checkbox" id="Marinated snails" name="sub-cat" value="Marinated snails">
<script>
alert(document.querySelector('[name="sub-cat"]').id)
</script>
</body>
</html>


А по факту:

<html>
<body>
<input required="" class="sub-menu-form sub-cat" type="checkbox" id="Marinated snails" name="sub-cat" value="Marinated snails">
<script>
alert(document.querySelector('#Marinated snails').value)
</script>
</body>
</html>


и в консоли будет ошибка.

Последний раз редактировалось laimas, 05.11.2019 в 13:06.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Скрипт для заполнения поля формы vatras Opera, Safari и др. 9 11.01.2019 11:38
Добавление поля для выбора файла MrKapustin jQuery 5 04.04.2014 17:34
Реализация игрового поля для игры "Точки" last-art Events/DOM/Window 7 22.04.2012 02:18
Валидация поля для отправки формы shkarbatov Javascript под браузер 3 25.07.2011 13:07
Автозаполнение почтовых адресов для всех стран. dopelher Оффтопик 3 09.06.2011 07:00