Как я делал всплывающую форму и её автопроверку в битриксе.

1 звезда2 звезда3 звезда4 звезда5 звезда (2 голос, рейтинг: 5,00 из 5)
Loading ... Loading ...

Хотите оперативно получать новые уроки и статьи блога LAWANS.RU. Просто введите ВАШ e-mail на форме справа >>>

Привет всем!

С битриксом работаю редко, но недавно делал сайт для знакомого на этой системе, и пришлось прокачать несколько вопросов во время работы над ним. Загвоздка была в реализации всплывающей формы со своим нестандартным шаблоном и дальнейшая её проверка на заполненность обязательных полей. Поэтому может кому и пригодится.
Вот форма:

всплывающая форма

1. Всплывание я реализал через через скриптик fancybox (http://www.fancybox.net/). Код такой был:

Подключение скритпа:

<script type="text/javascript" src="<?=SITE_TEMPLATE_PATH?>/scripts/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="<?=SITE_TEMPLATE_PATH?>/fancybox/jquery.fancybox-1.3.4.pack.js"></script>
<link rel="stylesheet" type="text/css" href="<?=SITE_TEMPLATE_PATH?>/fancybox/jquery.fancybox-1.3.4.css" media="screen" />

Далее указываем id ссылки для вызова формы

<script type="text/javascript">
                $(document).ready(function() {
$("#various1").fancybox({
‘titlePosition’: ‘inside’,
‘transitionIn’: ‘none’,
‘transitionOut’: ‘none’
});
</script>

Далее сама ссылка на вызов формы с id various1

<a id="vstrahkasko" href="#zaj_polis">Заказать полис</a>

Ну и тело формы

<div style="display: none;">
<div id="zaj_polis" class="formBox_04">
$APPLICATION->IncludeComponent(
"vkbroker:form.result.new",
".default",
Array(
"SEF_MODE" => "N",

"WEB_FORM_ID" => "7",

"LIST_URL" => "",

"EDIT_URL" => "",

"SUCCESS_URL" => "/success/",

"CHAIN_ITEM_TEXT" => "",

"CHAIN_ITEM_LINK" => "",

"IGNORE_CUSTOM_TEMPLATE" => "N",

"USE_EXTENDED_ERRORS" => "Y",

"CACHE_TYPE" => "A",

"CACHE_TIME" => "3600",

"CACHE_NOTES" => "",

"VARIABLE_ALIASES" => Array(

"WEB_FORM_ID" => "WEB_FORM_ID",

"RESULT_ID" => "RESULT_ID"

)

),

false

);

</div>
</div>

2. Автопроверку реализовал следующим образом:

Проблема заключалась в том что скрипт привязывается к id формы, а у формы его не было. Сама форма начиналась так

<form enctype="multipart/form-data" method="POST" action="/strahovanie.html" name="SIMPLE_FORM_7">

Поэтому пришлось вспомнить jquery и сделать через привязку к атрибуту name.

Сначала подключим стили ошибок:

<style type="text/css">
label.error { float: none; color: red; padding-left: .5em; vertical-align: top; }
</style>

И скрипт проверки:

<script type="text/javascript" src=" /scripts/jquery.validate.js"></script>

А вот обращение к форме по имени:

<script type="text/javascript">
 $(document).ready(function(){  
$(‘#zaj_polis form’).validate({  
rules:
{  
form_text_310: {
required: true
},
………………………………………………
},  
messages: {  
form_text_310: {
required: ‘Укажите свое ФИО, пожалуйста!’ },
 …………………………………………………
}    });   });
</script>

Вот так теперь стало после пустых полей

проверка формы

Вот собственно и всё. Пост получился узконаправленным, но на форумах битрикса таких решений не нашёл поэтому и решил хоть у себя в блоге отметить, хотя и понимаю что здесь наверно больше джумловодов ходит.

Если будут вопросы, пишите.


У ВАС ведь есть ТЕЛЕФОН? Или mp3-player? А может даже планшет, ноутбук или игровая консоль!
Хочется, чтобы он был необычным и уникальным?
Заходите к нам – мы поможем.

  
  
{lang: 'ru'}

Похожие статьи

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>