URL скопирован в буфер обмена!
Как запретить отправку формы если сумма меньше указанной
При помощи данной модификации можно указать минимальную сумму для отправки форм. Если сумма меньше указанной происходит блокировка кнопки. Работает в стандартных блоках и формах Zero Block. Скрипт мониторит сумму в поле ввода или калькуляторе.
Номер модификации в библиотеке TiCode
Модификация работает с включенным Autoscale в блоках
Модификация работает с Zero Block и стандартными блоками
Название переменной
Минимальная сумма
Текст ошибки
Цвет текста ошибки
<!--TICODE--><!-- Библиотека модификаций для Тильда https://ticode.dev -->
<!--TCD083--><style>
.TiCodeError {
display: block!important;
color: #FF0000;
margin-top: 10px;
font-family: Arial, sans-serif;
}
.TiCodeDis {
opacity: 0.5;
pointer-events: none;
}
.tn-atom .t-input-error {
box-shadow: none!important;
padding: 0!important;
}
</style>
<script>
$(function(){
var TCDminSum = 10000;
let TCDreeTimer = setInterval(function(){
var TCDfields = $('[name="Сумма"]');
if(TCDfields.length >= 1){
clearInterval(TCDreeTimer);
function checkSum(field) {
var sumValue = parseInt(field.val());
var errorMessage;
if (field.closest('.t-input-block').find('.t-calc__wrapper').length > 0) {
errorMessage = field.closest('.t-input-block').find('.TiCodeErrorMessage');
} else {
errorMessage = field.next('.t-input-error');
}
if(sumValue >= TCDminSum) {
errorMessage.text('').removeClass('TiCodeError');
field.closest('.t-form__inputsbox').find('.t-form__submit, .tn-form__submit').removeClass('TiCodeDis');
} else {
errorMessage.text(`Сумма должна быть больше 10000 р.`).addClass('TiCodeError');
field.closest('.t-form__inputsbox').find('.t-form__submit, .tn-form__submit').addClass('TiCodeDis');
}
}
$('.t-calc__wrapper').after('<div class="TiCodeErrorMessage"></div>');
TCDfields.each(function(){
var field = $(this);
field.on('input', function() {
checkSum(field);
});
if (field.closest('.t-input-block').find('.t-calc__wrapper').length > 0) {
var observer = new MutationObserver(function() {
checkSum(field);
});
observer.observe($('.t-calc')[0], { childList: true, subtree: true, characterData: true });
}
checkSum(field);
});
}
}, 1000);
$(document).keydown(function(event){
if(event.keyCode == 13) {
event.preventDefault();
return false;
}
});
});
</script>
<script>
$(document).ready(function() {
$(".tc-flashbtn .tn-atom").addClass("TCDbtnzone").append('<div class="TIeffect"></div>');
});
</script>
<style>
.TCDbtnzone {
overflow: hidden;
position: relative;
}
.TIeffect {
position: absolute;
top: 0;
left: -100%;
width: 75px;
height: 100%;
background: linear-gradient(90deg, rgba(255, 255, 255, 0.0) 0%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.3) 100%);
transform: skewX(-45deg);
overflow: hidden !important;
animation: TCanimationkey 5s ease-out infinite;
}
@keyframes TCanimationkey {
0% {
left: -100%;
}
25% {
left: 130%;
}
50% {
left: 130%;
}
75% {
left: 130%;
}
100% {
left: 130%;
}
}
</style>
Для нормальной работы модификации необходимо включить библиотеку jQuery.
Как включить: Настройки сайта -> Еще -> Подключить jQuery на страницах сайта
Как включить: Настройки сайта -> Еще -> Подключить jQuery на страницах сайта
1. Создаем стандартный блок формы или форму в зеро блок.
2. Добавляем в эту форму поле ввода в одну строку или поле калькулятор и указываем переменной название(Variable name) - Сумма
3. Указываем в генераторе в поле "минимальная сумма" сумму, меньше которой будем блокировать кнопку отправки формы. Например 10000.
4. При необходимости указываем дополнительные настройки в генераторе:
Текст ошибки - указываем свой текст который будем показывать когда ввели сумму меньше указанной;
Цвет текста ошибки - указываем цвет текста ошибки;
5. Копируем код и вставляем в HTML блок Т123. Блок кода размещаем ниже формы.
Примечание: Если используете форму зеро блок, то оставляйте запас в 20 пикселей снизу формы. Так как при показе текста ошибки форма будет немного больше по высоте становиться.
2. Добавляем в эту форму поле ввода в одну строку или поле калькулятор и указываем переменной название(Variable name) - Сумма
3. Указываем в генераторе в поле "минимальная сумма" сумму, меньше которой будем блокировать кнопку отправки формы. Например 10000.
4. При необходимости указываем дополнительные настройки в генераторе:
Текст ошибки - указываем свой текст который будем показывать когда ввели сумму меньше указанной;
Цвет текста ошибки - указываем цвет текста ошибки;
5. Копируем код и вставляем в HTML блок Т123. Блок кода размещаем ниже формы.
Примечание: Если используете форму зеро блок, то оставляйте запас в 20 пикселей снизу формы. Так как при показе текста ошибки форма будет немного больше по высоте становиться.
Оставьте заявку
Тестовая форма для демонстрации функционала
