Bootstrap Modal 验证后不工作，但报警工作

Posted 2023-05-08

【中文标题】Bootstrap Modal 验证后不工作，但报警工作

【英文标题】：Bootstrap Modal not working after validaion, but alert works

【发布时间】：2018-11-18 16:12:24

【问题描述】：

我在 bootstrap 4 中有一个预览按钮。如果表单无效，我想显示验证错误，如果表单有效，我想显示一个模式窗口。

我有这个代码。

    $("#previewBtn").click(function(event) 
    //$("#exampleModal").modal("show");  //Works fine if I uncomment

    //Fetch form to apply custom Bootstrap validation
    var form = $("#order-form")
    //alert(form.prop('id')) //test to ensure calling form correctly

    if (form[0].checkValidity() === false) 
      event.preventDefault();
      event.stopPropagation();
     else 
        //alert("Validated!");
        $("#exampleModal").modal("show");   
    
    form.addClass('was-validated'); 
  ) //validation end

如果表单无效，我会收到验证错误。

如果我取消注释第二行以显示模式，我会得到模式窗口。

但是如果验证没有错误，模态窗口在else 中不起作用。

如果验证没有错误，alert（上面显示模式）正在 else 中工作。

如果没有验证错误，如何显示模态窗口？

【参考方案1】：

在 jQuery 中显示元素的一种简单方法是使用 .show() 方法

例如：

$("#exampleModal").show();

在这里你可以找到关于 .show() http://api.jquery.com/show/的文档

希望对你有帮助

【参考方案2】：

我会检查您的表单变量的值。如果它在位置 1 而不是在 else 中工作，那么它让我认为 checkValidity() 要么返回 true，要么 if 语句抛出异常。

也许在你的var form 行中添加一个;