Как вызвать модальное окно после валидации?

Привет, подскажите, как можно вызвать модельное окно после валидации формы?
форма

&lt;form wire:submit.prevent="orderDelivery" class="popUp-place_form popUp-place_form--active popUp-place_form1"&gt;                         @error('phone')                         &lt;li class="warning"&gt;{{$message}}&lt;/li&gt;                         @enderror                         &lt;input type="text" wire:model="phone" name="phone" class="popUp-place_inp_phone"                                placeholder="+7 (XXX) XXX-XXXX"&gt;                         @error('name')                         &lt;li class="warning"&gt;{{$message}}&lt;/li&gt;                         @enderror                         &lt;input type="text" wire:model="name" name="name" class="popUp-place_inp_phone" placeholder="Имя"&gt;                         @error('street')                         &lt;li class="warning"&gt;{{$message}}&lt;/li&gt;                         @enderror                         &lt;input type="text" wire:model="street" name="street" class="popUp-place_inp" placeholder="Улица"&gt;                         @error('house')                         &lt;li class="warning"&gt;{{$message}}&lt;/li&gt;                         @enderror                         &lt;input type="text" wire:model="house" name="house" class="popUp-place_inp popUp-place_inp-sm"                                placeholder="Дом"&gt;                          &lt;input type="text" wire:model="flat" class="popUp-place_inp popUp-place_inp-m"                                placeholder="Квартира"&gt;                         &lt;input type="text" wire:model="entrance" class="popUp-place_inp popUp-place_inp-sm"                                placeholder="Подъезд"&gt;                         &lt;input type="text" wire:model="floor"                                class="popUp-place_inp popUp-place_inp-sm popUp-place_inp-xs" placeholder="Этаж"&gt;                     &lt;textarea wire:model="comment" class="popUp-place_inp popUp-place_inp-text"                               placeholder="Комментарий к заказу"&gt;&lt;/textarea&gt;                     &lt;input type="submit" class="popUp_btn" value="Подтвердить адрес"&gt;                 &lt;/form&gt;

1

<form wire:submit.prevent="orderDelivery" class="popUp-place_form popUp-place_form--active popUp-place_form1"> @error('phone') <li class="warning">{{$message}}</li> @enderror <input type="text" wire:model="phone" name="phone" class="popUp-place_inp_phone" placeholder="+7 (XXX) XXX-XXXX"> @error('name') <li class="warning">{{$message}}</li> @enderror <input type="text" wire:model="name" name="name" class="popUp-place_inp_phone" placeholder="Имя"> @error('street') <li class="warning">{{$message}}</li> @enderror <input type="text" wire:model="street" name="street" class="popUp-place_inp" placeholder="Улица"> @error('house') <li class="warning">{{$message}}</li> @enderror <input type="text" wire:model="house" name="house" class="popUp-place_inp popUp-place_inp-sm" placeholder="Дом"> <input type="text" wire:model="flat" class="popUp-place_inp popUp-place_inp-m" placeholder="Квартира"> <input type="text" wire:model="entrance" class="popUp-place_inp popUp-place_inp-sm" placeholder="Подъезд"> <input type="text" wire:model="floor" class="popUp-place_inp popUp-place_inp-sm popUp-place_inp-xs" placeholder="Этаж"> <textarea wire:model="comment" class="popUp-place_inp popUp-place_inp-text" placeholder="Комментарий к заказу"></textarea> <input type="submit" class="popUp_btn" value="Подтвердить адрес"> </form>

js

$('.thx-btn').on('click', function(e){         e.preventDefault();         $('.popUp').fadeOut(300);         $('.popUp-thx').fadeIn(300);     });

1	$('.thx-btn').on('click', function(e){ e.preventDefault(); $('.popUp').fadeOut(300); $('.popUp-thx').fadeIn(300); });

Дополнительно:

+ Заказать

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

Есть ответ
09.04.2024

Ответить

Для вызова модального окна после валидации формы на веб-странице можно использовать JavaScript. В данном примере я покажу, как это можно сделать с помощью jQuery.

1. Добавьте код для валидации формы. Например, вы можете использовать стандартный HTML5 атрибуты для валидации, такие как required, или же написать собственную функцию валидации.

2. После успешной валидации формы, вызовите функцию для отображения модального окна. Для этого создайте модальное окно в HTML и добавьте стили для его отображения.

3. Добавьте следующий JavaScript код для вызова модального окна после валидации:

$(document).ready(function() {
    // При отправке формы
    $('form').submit(function(event) {
        // Проверяем валидацию формы
        if (this.checkValidity()) {
            // Отменяем стандартное действие формы
            event.preventDefault();
            
            // Показываем модальное окно
            $('#myModal').modal('show');
        }
    });
});

1

2

3

4

5

6

7

8

9

10

11

12

13

$(document).ready(function() {

// При отправке формы

$('form').submit(function(event) {

// Проверяем валидацию формы

if (this.checkValidity()) {

// Отменяем стандартное действие формы

event.preventDefault();

// Показываем модальное окно

$('#myModal').modal('show');

}

});

4. Убедитесь, что у вас есть модальное окно с id="myModal" в вашем HTML коде:

<div class="modal fade" id="myModal" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
        <h4 class="modal-title" id="myModalLabel">Модальное окно</h4>
      </div>
      <div class="modal-body">
        <!-- Содержимое модального окна -->
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Закрыть</button>
      </div>
    </div>
  </div>
</div>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

<h4 class="modal-title" id="myModalLabel">Модальное окно</h4>

</div>

</div>

<button type="button" class="btn btn-default" data-dismiss="modal">Закрыть</button>

</div>

Теперь, после успешной валидации формы, модальное окно будет отображаться на вашей странице. Не забудьте подключить jQuery и Bootstrap для корректной работы модального окна.

Есть ответ
07.04.2024

Ответить

Для вызова модального окна после валидации формы, вам следует использовать JavaScript. Вот пример того, как это можно сделать:

1. Сначала вам нужно создать модальное окно в HTML. Например, вы можете использовать следующий код:

<div id="myModal" class="modal">
  <div class="modal-content">
    <span class="close">×</span>
    <p>Модальное окно</p>
  </div>
</div>

1

2

3

4

5

6

<p>Модальное окно</p>

</div>

2. Далее вам нужно добавить стили для модального окна в CSS:

.modal {
  display: none;
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0,0,0,0.4);
}

.modal-content {
  background-color: #fefefe;
  margin: 15% auto;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
}

.close {
  color: #aaaaaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

.modal {

display: none;

position: fixed;

z-index: 1;

left: 0;

top: 0;

width: 100%;

height: 100%;

overflow: auto;

background-color: rgba(0,0,0,0.4);

}

.modal-content {

background-color: #fefefe;

margin: 15% auto;

padding: 20px;

border: 1px solid #888;

width: 80%;

}

.close {

color: #aaaaaa;

float: right;

font-size: 28px;

font-weight: bold;

}

.close:hover,

.close:focus {

color: #000;

text-decoration: none;

cursor: pointer;

}

3. Теперь вам нужно добавить скрипт JavaScript, который будет вызывать модальное окно после валидации формы. Предположим, что у вас есть форма с id "myForm" и кнопка отправки с id "submitBtn". Вот пример скрипта:

document.getElementById("myForm").addEventListener("submit", function(event) {
  event.preventDefault();
  if (validateForm()) {
    document.getElementById("myModal").style.display = "block";
  }
});

function validateForm() {
  // Здесь вы можете добавить свою логику валидации формы
  return true; // Вернуть true, если форма прошла валидацию
}

document.getElementsByClassName("close")[0].addEventListener("click", function() {
  document.getElementById("myModal").style.display = "none";
});

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

document.getElementById("myForm").addEventListener("submit", function(event) {

event.preventDefault();

if (validateForm()) {

document.getElementById("myModal").style.display = "block";

}

});

function validateForm() {

// Здесь вы можете добавить свою логику валидации формы

return true; // Вернуть true, если форма прошла валидацию

}

document.getElementsByClassName("close")[0].addEventListener("click", function() {

document.getElementById("myModal").style.display = "none";

});

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

Надеюсь, это поможет вам решить вашу проблему! Если у вас возникнут дополнительные вопросы, не стесняйтесь задавать.

Как вызвать модальное окно после валидации?

Дополнительно:

Оставить комментарий Отменить

Ответы

Ежедневно, круглосуточно

Как вызвать модальное окно после валидации?

Дополнительно:

Оставить комментарий Отменить

Ответы

Метки

Ежедневно, круглосуточно