Удаление класса .was-validated после успешной отправки формы

Здравствуйте.
Помогите пожалуйста решить задачу:
Есть форма на сайте status777.ru
Сделана с помощью Bootstrap
Так вот, после успешной отправки, у самой формы появляется класс was-validated, его нужно удалить, чтобы сообщения об ошибках исчезали после успешной отправки.
Прошу помощи. я с яваскриптом особо не дружу, умею только встраивать.
Заранее благодарю.

Алексей Носкович

11 декабря 2021, 17:25

682

Комментарии: 20

Артур Шевченко

11 декабря 2021, 21:03

Если форма сделана с помощью AjaxForm+FormIt, то можно так

$(document).on('af_complete', function(e,response){
if(response.success){
$(response.form).find('.was-validated').removeClass('was-validated');
}
});

Алексей Носкович

12 декабря 2021, 12:40

Пробывал. К сожалению не срабатывает.

Алексей Носкович

12 декабря 2021, 12:47

Вообще код, который добавляет этот класс, выглядет так:

(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)
    })
})()

Может на его основе как то изменить функцию?

Артур Шевченко

12 декабря 2021, 13:58

Пробуйте так

(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)
    })
})()

Но логичнее убирать класс после успешной отправки, наверное, а присланный код форму не отправляет.

Константин

18 сентября 2023, 13:02

Здравствуйте, код формы:

<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>

В консоли браузера ошибок нет

Артур Шевченко

18 сентября 2023, 14:50

$(response.form).find('#success-modal').removeClass('d-none');

А #success-modal точно внутри формы?

$(response.form).removeClass('d-none');

А у формы точно есть класс 'd-none'?

Константин

18 сентября 2023, 16:06

У этого блока, который должен появиться после отправки:

<div id="success-modal" class="alert alert-info d-none">
  <p>Спасибо за обращение! Сообщение успешно отправлено, мы перезвоним Вам в течении 5 минут!</p>
</div>

Артур Шевченко

18 сентября 2023, 19:35

Я вижу. И вижу что он вне формы. А ещё у него id, т.е можно сделать так

$('#success-modal').removeClass('d-none');

Константин

18 сентября 2023, 19:42

Я пробовал и в форме этот блок указывать и после формы — никак не работает…
Так и указано, что для id:

<script>
  $(document).on('af_complete', function(e,response){
if(response.success){
$(response.form).find('#success-modal').removeClass('d-none');
}
});
</script>

Или не это имеете в виду?

Артур Шевченко

18 сентября 2023, 19:53

Дорогой друг, вы явно не понимаете что делаете, почитайте про получение html-элементов в JS

Константин

18 сентября 2023, 21:04

Сделал как написано в инструкции, причем на одном сайте работает, на этом нет, не могу понять в чем дело. Как я понимаю, мы отлавливаем событие af_complete, по его наступлению, мы удаляем у элемента с id=success-modal класс d-none

Артур Шевченко

18 сентября 2023, 22:25

Ну да, всё так. Только элемент надо правильно выбирать у которого класс удаляете. Я же написал как надо.

$('#success-modal').removeClass('d-none');

Константин

18 сентября 2023, 19:46

Форма:

<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>

Не срабатывает, в консоли браузера смотрю, класс d-none не убирается

Александр Мельник

12 декабря 2021, 18:14

Если форма сделана с помощью AjaxForm+FormIt, то можно так

$(document).on('af_complete', function(e,response){
if(response.success){
$(response.form).find('.was-validated').removeClass('was-validated');
}
});

Должно работать. Единственное что стоит проверить, а метод find у jquery не по детям ищет? Если по детям, то он не может найти класс was-validated, потому что он у формы.

Артур Шевченко

12 декабря 2021, 21:23

По детям))) А класс у формы, тогда так можно попробовать

$(document).on('af_complete', function(e,response){
if(response.success){
$(response.form).removeClass('was-validated');
}
});

Алексей Носкович

12 декабря 2021, 21:32

Артур спасибо большое! Работает. И вообще, всем спасибо! Народ, вы меня простите, зануду, я бы хотел еще спросить: не могли бы вы подсказать какой-нибудь курс или книгу по Javascript, ну так чтобы реально «вставило»?!

Артур Шевченко

12 декабря 2021, 21:52

Я не посоветую, не помню чтобы я что-то системно читал или смотрел по JS. Я гуглил решение конкретных задач и постепенно освоился, хотя конечно мне есть куда расти.

Алексей Носкович

12 декабря 2021, 21:54