Sweetalert - проверка не работает + форма не отправляется - PullRequest
Новая
       18

Sweetalert - проверка не работает + форма не отправляется

2 голосов
/ 10 июня 2019

Я пытаюсь реализовать sweetalert2 , но по какой-то причине он не применяет регулярную проверку html (т. Е. Required = 'true' не работает), я не получаю сообщение об ошибке, что полепусто.

Без swall2 он выдает ошибку с ошибкой, что поле пустое.

Кроме того, после подтверждения в диалоге swall, что я хочу продолжить («Да,отправить! "), форма не отправляется.

Что мне не хватает?

JSfiddle

HTML: 

<form>
   <label>Last Name</label>
   <input type="text"  required="true"/>
   <input class="btnn" type="submit" name="submit" id="btn-submit"/>
</form>

Javascript: 

$('#btn-submit').on('click', function(e) {
    e.preventDefault();
    var form = $('form');
    swal.fire({
        title: "Are you sure?",
        type: "warning",
        showCancelButton: true,
        confirmButtonColor: "#DD6B55",
        confirmButtonText: "Yes, submit it!",
        closeOnConfirm: false
    }, function(isConfirm) {
        if (isConfirm) form.submit();
    });
});

Ответы [ 3 ]

2 голосов
/ 10 июня 2019

В документации говорится, что после перехода на sweetalert2 структура изменилась с обратного вызова 

swal(
      {title: 'Are you sure?', showCancelButton: true}, function(isConfirm) {
      if (isConfirm) {
      // handle confirm
      } else {
      // handle all other cases
    }
  }
)

обещать на основе подхода 

Swal.fire({title: 'Are you sure?', showCancelButton: true}).then(result => {
 if (result.value) {
  // handle Confirm button click
 // result.value will contain `true` or the input value
 } else {
   // handle dismissals
   // result.dismiss can be 'cancel', 'overlay', 'esc' or 'timer'
 }
})
0 голосов
/ 10 июня 2019

Вы можете позвонить в swal при отправке формы, в данный момент нажав на кнопку подтверждения, окно подтверждения swal вызывается перед отправкой формы.Ссылка JSFiddle: sweetalert Попробуйте код ниже: 

                $('#form1').on('submit',function(e){
                    e.preventDefault();
                    var form = $('form');
                    swal.fire({
                        title: "Are you sure?",
                        type: "warning",
                        showCancelButton: true,
                        confirmButtonColor: "#DD6B55",
                        confirmButtonText: "Yes, submit it!",
                        closeOnConfirm: false
                    }, function(isConfirm){
                    		
                        if (isConfirm) form.submit();
                    });
                });
<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
<form name="form1" id="form1" method="post">
<label for="">Last Name</label><span class="required">  *</span>
<input type="text"  required />
<input class="btnn" type="submit" name="submit" id="btn-submit"/>
</form>
</body>
</html>
0 голосов
/ 10 июня 2019

Вы можете сделать это следующим образом. 

                $('#btn-submit').on('click',function(e){
                e.preventDefault();
                var form = $('form');
                console.log("hello");
                swal.fire({
                    title: "Are you sure?",
                    type: "warning",
                    showCancelButton: true,
                    confirmButtonColor: "#DD6B55",
                    confirmButtonText: "Yes, submit it!",
                }).then(function (result){
                    if(result.value === true){
                    console.log("Submitted");
                    form.submit();
                  }
                });
            });

Для получения дополнительной информации вы можете посмотреть примеры о SweetAlert2 из https://sweetalert2.github.io/#examples

...