Question

我有一个在模态弹出窗口中进行处理的表单。我希望在单击表单按钮时发生以下情况：

如果表单上的字段未通过验证，请使用浏览器的本机显示屏显示验证失败。
如果表单通过验证，请处理模态弹出窗口

但是我无法在IE10中使用它。问题的关键是：

如果按照Bootstrap模式弹出教程的建议使用<button type="button"的按钮，则没有浏览器进行其原生表单验证
如果我使用<button type="submit"按钮，那么所有浏览器都会显示本机表单验证，但是如果验证通过，IE10会继续重新加载页面（因为它提交表单），中止模式弹出窗口。 Chrome不会提交表单并正确显示模式弹出窗口。

我的问题是：如何在IE10中获得我想要的行为？

我的代码基于this tutorial，部分基于触发按钮的不同模态内容。这是表格：

<p><form role="form" class="form-inline">
    <div class="form-group">
        <label class="control-label" for="input_opt_name">Name:</label>
        <input type="text" class="form-control" required id="input_opt_name" placeholder="Name Here" data-toggle="tooltip" title="Enter the name:">
    </div>
    <button type="button" class="btn btn-info" data-toggle="modal" data-target="#modal_window" data-req="blabla">Set Name</button>
</form></p>

该代码成功触发验证弹出窗口;但是在验证失败的情况下，无论如何都会显示模态弹出窗口。我添加了以下代码来抑制它，这有效：

$('#modal_window').on('show.bs.modal', function(e)
{
    var button = $(e.relatedTarget);

    if ( button[0].type == "submit" )
    {
        var tf = button.closest('form');
        if ( tf != undefined )
        {
            if ( !tf[0].checkValidity() )
                e.preventDefault();
        }
    }
}

Answer 1

我不明白为什么Chrome会抑制表单提交，但IE10没有。但是我找到了一种解决方法（灵感来自this question）。

添加以下jquery：

$('form').bind("submit", function() { return false; });

这会导致表单提交被抑制，而不会干扰模式弹出窗口。这修复了IE10并且不会影响Chrome。

结合模态弹出窗口和HTML5表单验证

1 个答案: