Маска для поля телефон для разных стран
 

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

Вот теперь списки работают и стало понятно чего нужно - выбором списка страны выбирать нужное и в поле телефона?

Нет, нужно добавить маску в поле телефона, маска для каждой страны разная, как пример подтягивать значение Placeholder

Еще другой вопрос, при нажатии на кнопку отправить получаю в консоле ошибку 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>

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

this.pattern = this.placeholder.replace(/_/g,'\\d')

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

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

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

И где в этой форме это поле?

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

<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?

А как с логической ошибкой - два поля типа 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>

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