7 changed files with 328 additions and 5 deletions
@ -0,0 +1,312 @@
|
||||
<?php |
||||
$form_tpl = array( |
||||
'ajax_jqval_cap' => |
||||
'<div id=\\"[tag:formalias]\\" class=\\"col-sm-8 col-sm-offset-2\\"> |
||||
<div class=\\"page-header\\"> |
||||
<div class=\\"alert alert-info text-center\\" role=\\"alert\\"> |
||||
<h4>Демо интеграции в Модуль Контакты New v1.2.5<br><br> <a href=\\"https://jqueryvalidation.org/\\">jQuery Validation Plugin</a> и <a href=\\"https://developers.google.com/recaptcha/docs/v3\\">reCAPTCHA v3</a></h4> |
||||
</div> |
||||
<div class=\\"alert alert-warning alert-dismissable\\"> |
||||
Если форма не работает, или не работает валидация (отправляется пустая форма без проверки и т.п.) убедитесь, что библиотека jQuery (jquery.min.js - по умолчанию подключается модулем) подключена на странице только один раз! и расположена в секции <head> , а также подключен скрипт jquery.form.min.js (по умолчанию подключается модулем в разделе Скрипты и стили, необходимые для оформления и функционирования формы) |
||||
<button type=\\"button\\" class=\\"close\\" data-dismiss=\\"alert\\" aria-hidden=\\"true\\">×</button> |
||||
</div> |
||||
</div> |
||||
<div class=\\"panel panel-default\\"> |
||||
<div class=\\"panel-heading\\"> |
||||
<h3 class=\\"panel-title\\">[tag:formtitle]</h3> |
||||
</div> |
||||
<div class=\\"panel-body\\"> |
||||
<form id=\\"form-[tag:formalias]\\" method=\\"post\\" enctype=\\"multipart/form-data\\" class=\\"form-horizontal\\" role=\\"form\\" action=\\"\\"> |
||||
[tag:fld:email] |
||||
[tag:fld:subject] |
||||
[tag:fld:6] |
||||
[tag:fld:7] |
||||
[tag:fld:8] |
||||
[tag:fld:9] |
||||
<div class=\\"form-group\\"> |
||||
<div class=\\"col-sm-offset-4 col-sm-4\\"> |
||||
<button type=\\"submit\\" class=\\"btn btn-primary\\">Отправить</button> |
||||
</div> |
||||
</div> |
||||
</form> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
|
||||
<script type=\\"text/javascript\\"> |
||||
|
||||
$( document ).ready( function () { |
||||
$( \\"#form-[tag:formalias]\\" ).validate( { |
||||
rules: { |
||||
\\"form-ajax_jqval_cap[1]\\": { |
||||
required: true, |
||||
email: true |
||||
}, |
||||
\\"form-ajax_jqval_cap[2]\\": { |
||||
required: true, |
||||
minlength: 4 |
||||
}, |
||||
\\"form-ajax_jqval_cap[6]\\": { |
||||
required: true, |
||||
minlength: 2 |
||||
}, |
||||
\\"form-ajax_jqval_cap[7]\\": { |
||||
required: true, |
||||
maxlength: 4 |
||||
}, |
||||
\\"form-ajax_jqval_cap[8]\\": \\"required\\" |
||||
}, |
||||
messages: { |
||||
\\"form-ajax_jqval_cap[1]\\": { |
||||
required: \\"Поле \\\'Email\\\' обязательно к заполнению\\", |
||||
email: \\"Пожалуйста, введите действительный адрес электронной почты\\" |
||||
}, |
||||
\\"form-ajax_jqval_cap[2]\\": { |
||||
required: \\"Поле \\\'Тема\\\' обязательно к заполнению\\", |
||||
minlength: \\"Название темы должно содержать не менее 4 символов\\" |
||||
}, |
||||
\\"form-ajax_jqval_cap[6]\\": { |
||||
required: \\"Поле \\\'Никнейм\\\' обязательно к заполнению\\", |
||||
minlength: \\"Никнейм не может быть менее 2 символов\\" |
||||
}, |
||||
\\"form-ajax_jqval_cap[7]\\": { |
||||
required: \\"Поле \\\'Текст сообщения\\\' обязательно к заполнению\\", |
||||
maxlength: \\"Текст сообщения не может превышать 4 символов\\" |
||||
}, |
||||
\\"form-ajax_jqval_cap[8]\\": \\"Чекбокс должен быть активным\\" |
||||
}, |
||||
errorElement: \\"em\\", |
||||
errorPlacement: function ( error, element ) { |
||||
// Add the help-block class to the error element |
||||
error.addClass( \\"help-block\\" ); |
||||
|
||||
if ( element.prop( \\"type\\" ) === \\"checkbox\\" ) { |
||||
error.insertAfter( element.parent( \\"label\\" ) ); |
||||
} else { |
||||
error.insertAfter( element ); |
||||
} |
||||
}, |
||||
highlight: function ( element, errorClass, validClass ) { |
||||
$( element ).parents( \\".col-sm-5\\" ).addClass( \\"has-error\\" ).removeClass( \\"has-success\\" ); |
||||
}, |
||||
unhighlight: function (element, errorClass, validClass) { |
||||
$( element ).parents( \\".col-sm-5\\" ).addClass( \\"has-success\\" ).removeClass( \\"has-error\\" ); |
||||
}, |
||||
submitHandler: function(form) { |
||||
if ($(\\".app_err_msg\\").length) {$(\\\'.app_err_msg\\\').remove();} |
||||
grecaptcha.ready(function() { |
||||
grecaptcha.execute(\\\'Публичный ключ reCAPTCHA v3\\\', {action: \\\'submit_form\\\'}) |
||||
.then(function(token) { |
||||
$.ajax({ |
||||
type: \\\'post\\\', |
||||
url: \\\'[tag:path]inc/recaptcha3srvcode.php\\\', |
||||
data: {token: token}, |
||||
dataType: \\\'json\\\' |
||||
}).done(function(data) { |
||||
if (data.score < 0.5) |
||||
{$(\\\'#form-[tag:formalias]\\\').append(\\\'<div class=\\"app_err_msg alert alert-danger text-center\\" role=\\"alert\\"><h4>Вы не прошли валидацию защитой от спама reCAPTCHA</h4></div>\\\'); |
||||
$(\\\'button[type=submit]\\\',form).prop(\\\'disabled\\\',true); |
||||
} |
||||
else { |
||||
$(\\\'#hidden_fld_[tag:formalias]\\\').val(\\\'\\\'); |
||||
$(\\\'#hidden_fld_[tag:formalias]\\\').val(data.score); |
||||
$(\\\'#form-[tag:formalias]\\\').ajaxSubmit({ |
||||
url: \\\'[tag:path]index.php?module=contactsnew\\\', |
||||
data: { |
||||
alias_id: \\\'[tag:formalias]\\\' |
||||
}, |
||||
success: function (data) { |
||||
$(\\\'#form-[tag:formalias]\\\').after(data).remove(); |
||||
} |
||||
}); |
||||
return false; |
||||
} |
||||
}); |
||||
}); |
||||
}); |
||||
|
||||
} |
||||
}); |
||||
}); |
||||
</script>' |
||||
); |
||||
|
||||
$demo = array( |
||||
'alias' => 'ajax_jqval_cap', |
||||
'title' => 'Демо форма с Ajax, jQuery Validation Plugin и reCAPTCHA v3', |
||||
'mail_set' => array( |
||||
'from_name' => '', |
||||
'from_email' => '', |
||||
'subject_tpl' => '[tag:fld:subject]', |
||||
'receivers' => array( |
||||
array( |
||||
'email' => '', |
||||
'name' => '' |
||||
) |
||||
), |
||||
'format' => 'text', |
||||
), |
||||
'rubheader' => '<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> |
||||
<script src="https://www.recaptcha.net/recaptcha/api.js?render=Публичный ключ reCAPTCHA v3"></script> |
||||
<script type="text/javascript" src="[tag:path]modules/contactsnew/js/jquery.form.min.js"></script> |
||||
<script type="text/javascript" src="[tag:path]modules/contactsnew/js/jquery.validate.min.js"></script> |
||||
', |
||||
'form_tpl' => $form_tpl[$_REQUEST['demo']], |
||||
'mail_tpl' => '[tag:easymail]', |
||||
'finish_tpl' => '<div class="alert alert-success"> |
||||
Форма успешно отправлена! <a style="cursor: pointer; text-decoration: none;" onclick="window.location.href=this">Обновить страницу</a> |
||||
</div> |
||||
', |
||||
'code_onsubmit' => '', |
||||
'code_onvalidate' => '', |
||||
'code_onsend' => '', |
||||
'fields' => array( |
||||
1 => array( |
||||
'new' => true, |
||||
'form_id' => $fid, |
||||
'title' => 'email', |
||||
'active' => 1, |
||||
'type' => 'input', |
||||
'main' => 1, |
||||
'setting' => '', |
||||
'required' => 0, |
||||
'defaultval' => '', |
||||
'attributes' => 'id="fld[[tag:id]]" class="form-control" placeholder="[tag:title]"', |
||||
'tpl' => '<div class="form-group"> |
||||
<label class="col-sm-4 control-label" for="fld[[tag:id]]">[tag:title]</label> |
||||
<div class="col-sm-5"> |
||||
[tag:fld] |
||||
</div> |
||||
</div>' |
||||
), |
||||
2 => array( |
||||
'new' => true, |
||||
'form_id' => $fid, |
||||
'title' => 'subject', |
||||
'active' => 1, |
||||
'type' => 'input', |
||||
'main' => 1, |
||||
'setting' => '', |
||||
'required' => 0, |
||||
'defaultval' => '', |
||||
'attributes' => 'id="fld[[tag:id]]" class="form-control" placeholder="[tag:title]"', |
||||
'tpl' => '<div class="form-group"> |
||||
<label class="col-sm-4 control-label" for="fld[[tag:id]]">[tag:title]</label> |
||||
<div class="col-sm-5"> |
||||
[tag:fld] |
||||
</div> |
||||
</div>' |
||||
), |
||||
3 => array( |
||||
'new' => true, |
||||
'form_id' => $fid, |
||||
'title' => 'receivers', |
||||
'active' => 0, |
||||
'type' => 'select', |
||||
'main' => 1, |
||||
'setting' => '', |
||||
'required' => 0, |
||||
'defaultval' => 0, |
||||
'attributes' => '', |
||||
'tpl' => '' |
||||
), |
||||
4 => array( |
||||
'new' => true, |
||||
'form_id' => $fid, |
||||
'title' => 'copy', |
||||
'active' => 0, |
||||
'type' => 'checkbox', |
||||
'main' => 1, |
||||
'setting' => '', |
||||
'required' => 0, |
||||
'defaultval' => 1, |
||||
'attributes' => '', |
||||
'tpl' => '' |
||||
), |
||||
5 => array( |
||||
'new' => true, |
||||
'form_id' => $fid, |
||||
'title' => 'captcha', |
||||
'active' => 0, |
||||
'type' => 'input', |
||||
'main' => 1, |
||||
'setting' => '', |
||||
'required' => 1, |
||||
'defaultval' => '', |
||||
'attributes' => '', |
||||
'tpl' => '' |
||||
), |
||||
6 => array( |
||||
'new' => true, |
||||
'form_id' => $fid, |
||||
'title' => 'Никнейм', |
||||
'active' => 1, |
||||
'type' => 'input', |
||||
'main' => 0, |
||||
'setting' => '', |
||||
'required' => 0, |
||||
'defaultval' => '', |
||||
'attributes' => 'id="fld[[tag:id]]" class="form-control" placeholder="[tag:title]"', |
||||
'tpl' => '<div class="form-group"> |
||||
<label class="col-sm-4 control-label" for="fld[[tag:id]]">[tag:title]</label> |
||||
<div class="col-sm-5"> |
||||
[tag:fld] |
||||
</div> |
||||
</div>' |
||||
), |
||||
7 => array( |
||||
'new' => true, |
||||
'form_id' => $fid, |
||||
'title' => 'Текст сообщения', |
||||
'active' => 1, |
||||
'type' => 'textarea', |
||||
'main' => 0, |
||||
'setting' => '', |
||||
'required' => 0, |
||||
'defaultval' => '', |
||||
'attributes' => 'id="fld[[tag:id]]" class="form-control" placeholder="[tag:title]"', |
||||
'tpl' => '<div class="form-group"> |
||||
<label class="col-sm-4 control-label" for="fld[[tag:id]]">[tag:title]</label> |
||||
<div class="col-sm-5"> |
||||
[tag:fld] |
||||
</div> |
||||
</div>' |
||||
), |
||||
8 => array( |
||||
'new' => true, |
||||
'form_id' => $fid, |
||||
'title' => 'Работа чекбокса', |
||||
'active' => 1, |
||||
'type' => 'checkbox', |
||||
'main' => 0, |
||||
'setting' => '', |
||||
'required' => 0, |
||||
'defaultval' => '', |
||||
'attributes' => 'id="fld[[tag:id]]" value="agree"', |
||||
'tpl' => '<div class="form-group"> |
||||
<div class="col-sm-5 col-sm-offset-4"> |
||||
<div class="checkbox"> |
||||
<label> |
||||
[tag:fld]Пример валидации чекбокса |
||||
</label> |
||||
</div> |
||||
</div> |
||||
</div>' |
||||
), |
||||
9 => array( |
||||
'new' => true, |
||||
'form_id' => $fid, |
||||
'title' => 'Оценка отправителя формы сервисом reCAPTCHA', |
||||
'active' => 1, |
||||
'type' => 'input', |
||||
'main' => 0, |
||||
'setting' => '', |
||||
'required' => 0, |
||||
'defaultval' => '', |
||||
'attributes' => 'id="hidden_fld_[tag:formalias]" type="hidden"', |
||||
'tpl' => '[tag:fld]' |
||||
) |
||||
|
||||
|
||||
) |
||||
); |
||||
Loading…
Reference in new issue