Удаление класса .was-validated после успешной отправки формы
Здравствуйте.
Помогите пожалуйста решить задачу:
Есть форма на сайте status777.ru
Сделана с помощью Bootstrap
Так вот, после успешной отправки, у самой формы появляется класс was-validated, его нужно удалить, чтобы сообщения об ошибках исчезали после успешной отправки.
Прошу помощи. я с яваскриптом особо не дружу, умею только встраивать.
Заранее благодарю.
Помогите пожалуйста решить задачу:
Есть форма на сайте status777.ru
Сделана с помощью Bootstrap
Так вот, после успешной отправки, у самой формы появляется класс was-validated, его нужно удалить, чтобы сообщения об ошибках исчезали после успешной отправки.
Прошу помощи. я с яваскриптом особо не дружу, умею только встраивать.
Заранее благодарю.
11 декабря 2021, 17:25
Комментарии: 20
Вообще код, который добавляет этот класс, выглядет так:
(function () {
'use strict'
// Получите все формы, к которым мы хотим применить пользовательские стили проверки Bootstrap
var forms = document.querySelectorAll('.needs-validation')
// Зацикливайтесь на них и предотвращайте отправку
Array.prototype.slice.call(forms)
.forEach(function (form) {
form.addEventListener('submit', function (event) {
if (!form.checkValidity()) {
event.preventDefault()
event.stopPropagation()
}
form.classList.add('was-validated')
}, false)
})
})()
Пробуйте так
(function () {
'use strict'
// Получите все формы, к которым мы хотим применить пользовательские стили проверки Bootstrap
var forms = document.querySelectorAll('.needs-validation')
// Зацикливайтесь на них и предотвращайте отправку
Array.prototype.slice.call(forms)
.forEach(function (form) {
form.addEventListener('submit', function (event) {
if (!form.checkValidity()) {
event.preventDefault()
event.stopPropagation()
form.classList.add('was-validated')
}
else{
form.classList.remove('was-validated')
}
}, false)
})
})()
Здравствуйте, код формы:
<form action="" method="post" class="ajax_form af_example">
<div class="row">
<div class="col-xxl-6 col-xl-6 col-lg-6 col-md-6">
<div class="contact__input mb-30">
<input type="text" id="af_name" name="name" value="[[+fi.name]]" placeholder="Ваше имя">
</div>
</div>
<div class="col-xxl-6 col-xl-6 col-lg-6 col-md-6">
<div class="contact__input mb-30">
<input type="tel" id="af_phone" name="phone" value="[[+fi.phone]]" placeholder="Ваш телефон">
</div>
</div>
<div class="col-xxl-6 col-xl-6 col-lg-6 col-md-6">
<div class="contact__input mb-30">
<input type="tel" id="af_email" name="email" value="[[+fi.email]]" placeholder="Почта для ответа">
</div>
</div>
<div class="col-xxl-6 col-xl-6 col-lg-6 col-md-6">
<div class="contact__input mb-30">
<select id="af_theme" name="theme" value="[[+fi.theme]]">
<option>Тема</option>
<option>Подбор оборудования</option>
<option>Консультация</option>
<option>Запрос КП</option>
<option>Заявка на обратный звонок</option>
</select>
</div>
</div>
<div class="col-xxl-12">
<div class="contact__input mb-30">
<textarea placeholder="Ваш вопрос"></textarea>
</div>
</div>
<div class="col-xxl-12">
<div class="contact__form-btn">
<button type="submit" class="d-btn-corp">Отправить</button>
</div>
</div>
</div>
[[+fi.success:is=`1`:then=`
<div class="alert alert-success">[[+fi.successMessage]]</div>
`]]
[[+fi.validation_error:is=`1`:then=`
<div class="alert alert-danger">[[+fi.validation_error_message]]</div>
`]]
<p><input type="checkbox" name="checkme"/> Я прочитал(а) и согласен с <a href="[[~35]]" target="_blank">политикой конфиденциальности</a></p>
</form>
<div id="success-modal" class="alert alert-info d-none">
<p>Спасибо за обращение! Сообщение успешно отправлено, мы перезвоним Вам в течении 5 минут!</p>
</div><script>
$(document).on('af_complete', function(e,response){
if(response.success){
$(response.form).find('#success-modal').removeClass('d-none');
}
});
</script><script>
$(document).on('af_complete', function(e,response){
if(response.success){
$(response.form).removeClass('d-none');
}
});
</script>
Я пробовал и в форме этот блок указывать и после формы — никак не работает…
Так и указано, что для id:
Так и указано, что для id:
<script>
$(document).on('af_complete', function(e,response){
if(response.success){
$(response.form).find('#success-modal').removeClass('d-none');
}
});
</script>
Форма:
<form action="" method="post" class="ajax_form af_example">
<div class="row">
<div class="col-xxl-6 col-xl-6 col-lg-6 col-md-6">
<div class="contact__input mb-30">
<input type="text" id="af_name" name="name" value="[[+fi.name]]" placeholder="Ваше имя">
</div>
</div>
<div class="col-xxl-6 col-xl-6 col-lg-6 col-md-6">
<div class="contact__input mb-30">
<input type="tel" id="af_phone" name="phone" value="[[+fi.phone]]" placeholder="Ваш телефон">
</div>
</div>
<div class="col-xxl-6 col-xl-6 col-lg-6 col-md-6">
<div class="contact__input mb-30">
<input type="tel" id="af_email" name="email" value="[[+fi.email]]" placeholder="Почта для ответа">
</div>
</div>
<div class="col-xxl-6 col-xl-6 col-lg-6 col-md-6">
<div class="contact__input mb-30">
<select id="af_theme" name="theme" value="[[+fi.theme]]">
<option>Тема</option>
<option>Подбор оборудования</option>
<option>Консультация</option>
<option>Запрос КП</option>
<option>Заявка на обратный звонок</option>
</select>
</div>
</div>
<div class="col-xxl-12">
<div class="contact__input mb-30">
<textarea placeholder="Ваш вопрос"></textarea>
</div>
</div>
<div class="col-xxl-12">
<div class="contact__form-btn">
<button type="submit" class="d-btn-corp">Отправить</button>
</div>
</div>
</div>
[[+fi.success:is=`1`:then=`
<div class="alert alert-success">[[+fi.successMessage]]</div>
`]]
[[+fi.validation_error:is=`1`:then=`
<div class="alert alert-danger">[[+fi.validation_error_message]]</div>
`]]
<p><input type="checkbox" name="checkme"/> Я прочитал(а) и согласен с <a href="[[~35]]" target="_blank">политикой конфиденциальности</a></p>
<div id="success-modal" class="alert alert-info d-none">
<p>Спасибо за обращение! Сообщение успешно отправлено, мы перезвоним Вам в течении 5 минут!</p>
</div>
</form><script>
$(document).on('af_complete', function(e,response){
if(response.success){
$(response.form).find('#success-modal').removeClass('d-none');
}
});
</script>
Если форма сделана с помощью AjaxForm+FormIt, то можно так
$(document).on('af_complete', function(e,response){
if(response.success){
$(response.form).find('.was-validated').removeClass('was-validated');
}
});
Авторизуйтесь или зарегистрируйтесь, чтобы оставлять комментарии.
Здесь упомянуты:
| Компонент | Текущая версия | Закачки |
| AjaxForm | 1.2.2-pl от 17.10.2021 | 19 530 |
20 ноября 2024, 16:25
В сниппете rcv3_html достаточно отложить загрузку через setTimeout (хотя кто-то делает через onClick). Не думаю что мой вариант самый правильный и что...
19 ноября 2024, 10:51
Решил свою проблему через имя пользователя, но хотелось бы через права пользователя «Неограниченные права»
<?php
/**
* Системное событие OnMan...
19 ноября 2024, 09:09
Спасибо, тоже очень интерестное решение.
18 ноября 2024, 15:21
'where' => [
'Data.price:!='=>'0'
]
18 ноября 2024, 14:19
miniShop2.Order.add('extfld_delivery_price','100', function() {
miniShop2.Order.getcost();
})
Это вот работает, но чтобы увид...
18 ноября 2024, 10:11
Благодарю за ответы.
16 ноября 2024, 21:12
Спасибо. Работает.
