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

标签 javascript forms sweetalert2

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

最佳答案

文档说在迁移到 sweetalert2 后,结构已经从回调方法发生了变化

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

基于 promise 的方法

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

关于javascript - Sweetalert - 验证不起作用+表单未提交,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56525049/

相关文章:

django dateTime 小部件未显示

javascript - SweetAlert2 弹出窗口在 .php 文件中不起作用

javascript - swal().then(function ()) 未在 Internet Explorer 11 中触发

javascript - 在 Polymer 2.0 中使用 iron-scroll-threshold 为 scroll-target = document 处理滚动

javascript - JavaScript 函数中的字符串参数

javascript - 尽管使用了 zIndex,React-native-paper 菜单仍隐藏在其他元素后面。我如何将元素置于顶部?

php - 表单提交两次

javascript - 获取当前元素(keyup)并将其作为参数传递给另一个函数

javascript - 提交前将值传递给隐藏的输入值

javascript - div 内的 SweetAlert2