Sweetalert - 验证不起作用 + 表单未提交答案

【问题标题】：Sweetalert - validation isn't working + form is not submittingSweetalert - 验证不起作用 + 表单未提交
【发布时间】：2019-06-10 10:55:58
【问题描述】：

我正在尝试实现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();
    });
});

【问题讨论】：

标签： javascript forms sweetalert2

【解决方案1】：

文档说，在迁移到 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'
 }
})

【讨论】：

即使该字段为空，我仍然可以进入 sweetalert2 对话框。
如果您覆盖默认提交行为，您应该通过 javascript 本身检查表单验证。有关更多信息，请参阅此链接。 w3.org/TR/html5/forms.html#form-submission-algorithm
你是对的，我设法进行了验证。但是，我添加了这部分 if (result.value) { form.submit();但是后来我陷入了一个循环，每次我点击确认它都会提示我 swal2 对话框并且没有继续提交表单 - 有什么想法吗？
将其包裹在条件块周围，即仅在验证成功时通过，否则仅返回 false。

【解决方案2】：

你可以这样做。

                $('#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();
                  }
                });
            });

有关更多信息，您可以查看来自 https://sweetalert2.github.io/#examples 的有关 SweetAlert2 的示例

【讨论】：

【解决方案3】：

您可以在提交表单时调用 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>

【讨论】：