<body >
<div id="app">
<form @submit.prevent="submitHandler">
<label for="name" >Name</label>
<input type="text" id="name" name="name" placeholder="Введите Ваше имя" v-model="name" :class="{invalid:(!$v.name.regname && !$v.name.required && $v.email.$dirty)}"/>
<span v-if="!$v.name.regname && !$v.name.required && $v.email.$dirty">введите корректное значение</span><br>
<label for="lname">Еmail</label>
<input type="text" id="emal" name="email" placeholder="Введите ваш email" v-model="email" :class="{invalid:($v.email.$dirty && !$v.email.required)}"/>
<span v-if="$v.email.$dirty && !$v.email.required">введите корректное значение</span><br>
<label for="">Номер телефона</label>
<input type="text" id="tel" name="tel" placeholder="Введите номер телефона" v-mask="'####-##'" v-model="tel" :class="{invalid:($v.tel.$dirty && !$v.tel.required)}"/>
<span v-if="$v.tel.$dirty && !$v.tel.required">введите корректное значение </span><br>
<label for=""> Язык</label>
<select name="lenguage" id="" v-model="lenguage">
<option value="leng" v-for="leng in lenguages" >{{leng}}</option>
</select>
<input type="checkbox" id="ch" v-model="ch" :class="{invalid:($v.ch.$dirty && !$v.ch.required)}"/>
<label for="">Принимаю условия использования</label>
<button type="submit" :disabled="$v.$invalid" >Зарегистрироваться</button>
</form>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuelidate@0.7.6/dist/vuelidate.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuelidate@0.7.6/dist/validators.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/v-mask/dist/v-mask.min.js"></script>
<script>
/*const { required, minLength } = window.validators;*/ /*:class="{invalid:($v.name.$dirty && !$v.name.required)}*/
Vue.use(window.vuelidate.default);
// As a plugin
Vue.use(VueMask.VueMaskPlugin);
// Or as a directive
Vue.directive('mask', VueMask.VueMaskDirective);
const { required,alpha, minLength, email } = window.validators;
new Vue({
el: "#app",
data: {
name: '' ,
email: '',
tel: '',
lenguages: ['en','ru','ua'],
lenguage:'',
ch:false
},
validations: {
name: {
required,
regname(value) {
if(value === "") return false;
return new RegExp('^[a-z\\s-]+$','g').test(value);
}
},
email: {
email,
required,
},
tel: {
required,
/*minLength: minLength(11)*/
},
ch: {
required
/* checked(value) {
return value;
}*/
}
},
methods: {
submitHandler() {
if(this.$v.$invalid){
this.$v.$touch();
return;
}
}
}
})
</script>
</body>
</html>
import {
SET_LOADER,
SET_STEP,
SET_DATALIST,
SET_CURRENT_ITEM,
SET_DATAITEM_INFO,
SET_ERROR,
} from '../../mutations-types';
/**
* DataList types
*/
export const SET_LOADER = 'SET_LOADER';
export const SET_STEP = 'SET_STEP';
export const SET_DATALIST = 'SET_DATALIST';
export const SET_CURRENT_ITEM = 'SET_CURRENT_ITEM';
export const SET_DATAITEM_INFO = 'SET_DATAITEM_INFO';
export const SET_ERROR = 'SET_ERROR';
import axios from 'axios';
import {
SET_LOADER,
SET_STEP,
SET_DATALIST,
SET_CURRENT_ITEM,
SET_DATAITEM_INFO,
SET_ERROR,
} from '../../mutations-types';
const state = {
loader: false,
error: null,
dataList: null,
currentItem: null,
dataItemInfo: null,
secondStep: false,
};
const getters = {
loadStatus: state => state.loader,
errorStatus: state => state.error,
dataList: state => state.dataList,
currentItem: state => state.currentItem,
dataItemInfo: state => state.dataItemInfo,
secondStep: state => state.secondStep,
};
const mutations = {
[SET_LOADER](state, payload) {
state.loader = payload;
},
[SET_ERROR](state, payload) {
state.error = payload;
},
[SET_DATALIST](state, payload) {
state.dataList = payload;
},
[SET_CURRENT_ITEM](state, payload) {
state.currentItem = payload;
},
[SET_DATAITEM_INFO](state, payload) {
state.dataItemInfo = payload;
},
[SET_STEP](state, payload) {
state.secondStep = payload;
},
};
const actions = {
loadData({ commit }) {
axios.get('https://jsonplaceholder.typicode.com/posts')
.then(response => {
commit('SET_DATALIST', response.data.slice(60));
})
.catch(error => {
commit('SET_ERROR', error);
});
},
setCurrentItem({ commit }, id) {
commit('SET_CURRENT_ITEM', id);
},
resetQuery({ commit }) {
commit('SET_CURRENT_ITEM', null);
commit('SET_STEP', false);
commit('SET_DATAITEM_INFO', null);
},
async loadDataItemInfo({ commit, getters }) {
try {
commit('SET_STEP', true);
commit('SET_LOADER', true);
commit('SET_DATAITEM_INFO', null);
const response = await fetch(
`https://jsonplaceholder.typicode.com/posts/${getters.currentItem}`,
{
method: 'GET',
},
);
const data = await response.json();
setTimeout(() => {
commit('SET_DATAITEM_INFO', data);
commit('SET_LOADER', false);
}, 300);
} catch (error) {
commit('SET_ERROR', error);
}
},
moveBack({ commit }) {
commit('SET_DATAITEM_INFO', null);
commit('SET_STEP', false);
},
};
export default {
state,
getters,
mutations,
actions,
};
<div class="page__container">
<div class="page__container__aside">
<?$APPLICATION->IncludeComponent("algoritm:sections","catalog",["IBLOCK_ID" => $arParams['IBLOCK_ID']]);?>
</div>
<div class="page__container__content">
<?
$sectionId = false;
if (!empty($_REQUEST['section_id'])){
$sectionId = intval($_REQUEST['section_id']);
}
if (!empty($_REQUEST['sub_section'])){
$GLOBALS['arrFilter']['SECTION_ID'] = $_REQUEST['sub_section'];
$GLOBALS['arrFilter']['INCLUDE_SUBSECTIONS'] = 'Y';
}
else{
/*$GLOBALS['arrFilter']['SECTION_ID'] = array( 180, 439 , 454 );*/
$GLOBALS['arrFilter']['INCLUDE_SUBSECTIONS'] = 'Y';
}
$pageElementCount = 50;
$displayShows = [
25 => ['count' => 25, 'active' => true],
50 => ['count' => 50, 'active' => false],
100 => ['count' => 100, 'active' => false],
200 => ['count' => 200, 'active' => false]
];
if (!empty($_REQUEST['count']) && !empty($displayShows[$_REQUEST['count']])){
$_SESSION['PAGE_ELEMENT_COUNT'] = $_REQUEST['count'];
}
foreach($displayShows as $key => $value){
if(!empty($_SESSION['PAGE_ELEMENT_COUNT'])){
if($value['count'] == $_SESSION['PAGE_ELEMENT_COUNT']){
$pageElementCount = $value['count'];
$displayShows[$key]['active'] = true;
} else {
$displayShows[$key]['active'] = false;
}
}
$urlArray = $_GET;
$urlArray['count'] = $value['count'];
$url = http_build_query($urlArray);
$displayShows[$key]['url'] = $url;
}
$tpl = 'main';
if (!empty($arParams['tpl'])){
$tpl = $arParams['tpl'];
}
$APPLICATION->IncludeComponent("bitrix:catalog.section", $tpl, Array(
"ACTION_VARIABLE" => "action", // Название переменной, в которой передается действие
"ADD_PICT_PROP" => "-", // Дополнительная картинка основного товара
"ADD_PROPERTIES_TO_BASKET" => "Y", // Добавлять в корзину свойства товаров и предложений
"ADD_SECTIONS_CHAIN" => "N", // Включать раздел в цепочку навигации
"ADD_TO_BASKET_ACTION" => "ADD", // Показывать кнопку добавления в корзину или покупки
"AJAX_MODE" => "N", // Включить режим AJAX
"AJAX_OPTION_ADDITIONAL" => "", // Дополнительный идентификатор
"AJAX_OPTION_HISTORY" => "N", // Включить эмуляцию навигации браузера
"AJAX_OPTION_JUMP" => "N", // Включить прокрутку к началу компонента
"AJAX_OPTION_STYLE" => "Y", // Включить подгрузку стилей
"BACKGROUND_IMAGE" => "-", // Установить фоновую картинку для шаблона из свойства
"BASKET_URL" => "/personal/basket.php", // URL, ведущий на страницу с корзиной покупателя
"BROWSER_TITLE" => "-", // Установить заголовок окна браузера из свойства
"CACHE_FILTER" => "Y", // Кешировать при установленном фильтре
"CACHE_GROUPS" => "Y", // Учитывать права доступа
"CACHE_TIME" => "36000000", // Время кеширования (сек.)
"CACHE_TYPE" => "A", // Тип кеширования
"COMPATIBLE_MODE" => "Y", // Включить режим совместимости
"COMPOSITE_FRAME_MODE" => "A", // Голосование шаблона компонента по умолчанию
"COMPOSITE_FRAME_TYPE" => "AUTO", // Содержимое компонента
"CONVERT_CURRENCY" => "N", // Показывать цены в одной валюте
"CUSTOM_FILTER" => "",
"DETAIL_URL" => "", // URL, ведущий на страницу с содержимым элемента раздела
"DISABLE_INIT_JS_IN_COMPONENT" => "N", // Не подключать js-библиотеки в компоненте
"DISPLAY_BOTTOM_PAGER" => "Y", // Выводить под списком
"DISPLAY_COMPARE" => "N", // Разрешить сравнение товаров
"DISPLAY_TOP_PAGER" => "N", // Выводить над списком
// "ELEMENT_SORT_FIELD" => "CATALOG_QUANTITY", // По какому полю сортируем элементы
// "ELEMENT_SORT_FIELD2" => "id", // Поле для второй сортировки элементов
"ELEMENT_SORT_FIELD" => "Vendor",
"ELEMENT_SORT_FIELD2" => "name",
"ELEMENT_SORT_ORDER" => "desc", // Порядок сортировки элементов
"ELEMENT_SORT_ORDER2" => "desc", // Порядок второй сортировки элементов
"ENLARGE_PRODUCT" => "STRICT", // Выделять товары в списке
"FILTER_NAME" => "arrFilter", // Имя массива со значениями фильтра для фильтрации элементов
"HIDE_NOT_AVAILABLE" => "N", // Недоступные товары
"HIDE_NOT_AVAILABLE_OFFERS" => "N", // Недоступные торговые предложения
"IBLOCK_ID" => "1", // Инфоблок
"IBLOCK_TYPE" => "catalog", // Тип инфоблока
"INCLUDE_SUBSECTIONS" => "Y", // Показывать элементы подразделов раздела
"LABEL_PROP" => "", // Свойства меток товара
"LAZY_LOAD" => "N", // Показать кнопку ленивой загрузки Lazy Load
"LINE_ELEMENT_COUNT" => "3", // Количество элементов выводимых в одной строке таблицы
"LOAD_ON_SCROLL" => "N", // Подгружать товары при прокрутке до конца
"MESSAGE_404" => "", // Сообщение для показа (по умолчанию из компонента)
"MESS_BTN_ADD_TO_BASKET" => "В корзину", // Текст кнопки "Добавить в корзину"
"MESS_BTN_BUY" => "Купить", // Текст кнопки "Купить"
"MESS_BTN_DETAIL" => "Подробнее", // Текст кнопки "Подробнее"
"MESS_BTN_SUBSCRIBE" => "Подписаться", // Текст кнопки "Уведомить о поступлении"
"MESS_NOT_AVAILABLE" => "Нет в наличии", // Сообщение об отсутствии товара
"META_DESCRIPTION" => "-", // Установить описание страницы из свойства
"META_KEYWORDS" => "-", // Установить ключевые слова страницы из свойства
"OFFERS_LIMIT" => "5", // Максимальное количество предложений для показа (0 - все)
"PAGER_BASE_LINK_ENABLE" => "N", // Включить обработку ссылок
"PAGER_DESC_NUMBERING" => "N", // Использовать обратную навигацию
"PAGER_DESC_NUMBERING_CACHE_TIME" => "36000", // Время кеширования страниц для обратной навигации
"PAGER_SHOW_ALL" => "N", // Показывать ссылку "Все"
"PAGER_SHOW_ALWAYS" => "Y", // Выводить всегда
"PAGER_TEMPLATE" => "main", // Шаблон постраничной навигации
"PAGER_TITLE" => "Товары", // Название категорий
"PAGE_ELEMENT_COUNT" =>$pageElementCount, // Количество элементов на странице
"DISPLAY_SHOWS" => $displayShows, // Массив для кнопок сколько выводить элементов на странице
"PARTIAL_PRODUCT_PROPERTIES" => "N", // Разрешить добавлять в корзину товары, у которых заполнены не все характеристики
"PRICE_CODE" => array( // Тип цены
0 => "Rozn_Price_RUR",
),
"PRICE_VAT_INCLUDE" => "Y", // Включать НДС в цену
"PRODUCT_BLOCKS_ORDER" => "price,props,sku,quantityLimit,quantity,buttons", // Порядок отображения блоков товара
"PRODUCT_ID_VARIABLE" => "id", // Название переменной, в которой передается код товара для покупки
"PRODUCT_PROPS_VARIABLE" => "prop", // Название переменной, в которой передаются характеристики товара
"PRODUCT_QUANTITY_VARIABLE" => "quantity", // Название переменной, в которой передается количество товара
"PRODUCT_ROW_VARIANTS" => "[{'VARIANT':'2','BIG_DATA':false},{'VARIANT':'2','BIG_DATA':false},{'VARIANT':'2','BIG_DATA':false},{'VARIANT':'2','BIG_DATA':false},{'VARIANT':'2','BIG_DATA':false},{'VARIANT':'2','BIG_DATA':false}]", // Вариант отображения товаров
"PRODUCT_SUBSCRIPTION" => "Y", // Разрешить оповещения для отсутствующих товаров
"RCM_PROD_ID" => $_REQUEST["PRODUCT_ID"], // Параметр ID продукта (для товарных рекомендаций)
"RCM_TYPE" => "personal", // Тип рекомендации
"SECTION_CODE" => "", // Код раздела
"SECTION_ID" => $sectionId, // ID раздела
"SECTION_ID_VARIABLE" => "", // Название переменной, в которой передается код группы
"SECTION_URL" => "", // URL, ведущий на страницу с содержимым раздела
"SECTION_USER_FIELDS" => array( // Свойства раздела
0 => "",
1 => "",
),
"SEF_MODE" => "N", // Включить поддержку ЧПУ
"SET_BROWSER_TITLE" => "Y", // Устанавливать заголовок окна браузера
"SET_LAST_MODIFIED" => "N", // Устанавливать в заголовках ответа время модификации страницы
"SET_META_DESCRIPTION" => "Y", // Устанавливать описание страницы
"SET_META_KEYWORDS" => "Y", // Устанавливать ключевые слова страницы
"SET_STATUS_404" => "N", // Устанавливать статус 404
"SET_TITLE" => "Y", // Устанавливать заголовок страницы
"SHOW_404" => "N", // Показ специальной страницы
"SHOW_ALL_WO_SECTION" => "Y", // Показывать все элементы, если не указан раздел
"SHOW_CLOSE_POPUP" => "N", // Показывать кнопку продолжения покупок во всплывающих окнах
"SHOW_DISCOUNT_PERCENT" => "N", // Показывать процент скидки
"SHOW_FROM_SECTION" => "N", // Показывать товары из раздела
"SHOW_MAX_QUANTITY" => "N", // Показывать остаток товара
"SHOW_OLD_PRICE" => "N", // Показывать старую цену
"SHOW_PRICE_COUNT" => "1", // Выводить цены для количества
"SHOW_SLIDER" => "Y", // Показывать слайдер для товаров
"SLIDER_INTERVAL" => "3000", // Интервал смены слайдов, мс
"SLIDER_PROGRESS" => "N", // Показывать полосу прогресса
"TEMPLATE_THEME" => "blue", // Цветовая тема
"USE_ENHANCED_ECOMMERCE" => "N", // Отправлять данные электронной торговли в Google и Яндекс
"USE_MAIN_ELEMENT_SECTION" => "N", // Использовать основной раздел для показа элемента
"USE_PRICE_COUNT" => "N", // Использовать вывод цен с диапазонами
"USE_PRODUCT_QUANTITY" => "N", // Разрешить указание количества товара
"TITLE" => ""
),
false
);?>
"ELEMENT_SORT_FIELD" => "Vendor",
"ELEMENT_SORT_FIELD2" => "name",
"ELEMENT_SORT_ORDER" => "desc", // Порядок сортировки элементов
"ELEMENT_SORT_ORDER2" => "desc", // Порядок второй сортировки элементов
input id="section_<?=$arChild['ID'];?>" class="j-catalog_section_item" type="checkbox" name="sub_section[0]" value=<?
foreach($arChild['SET_ID'] as $key => $id){
if($key > 0) {echo '&sub_section['.$key.']='.$id;}
else{echo $id;}
}
?> >