当我通过 Bootstrap 模型提交表单时，HTML“必需”属性不起作用答案

【问题标题】：Html "required" attribute doesn't work when i submit a form via a Bootstrap model当我通过 Bootstrap 模型提交表单时，HTML“必需”属性不起作用
【发布时间】：2017-01-13 12:13:43
【问题描述】：

我有一个 html 表单，它通过引导模式提交，当我单击表单本身的提交按钮时会弹出该模式。提交按钮打开引发通知的引导模式。在该模式中，我有一个“继续”按钮，用于提交表单，但如果我使用模式上的提交提交，表单字段上的必需属性将不起作用。

这是我的模态 n 形式：

<div class="modal fade" id="confirm-submit" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog modal-sm">
    <div class="modal-content">
        <div class="modal-body"> <p style="font-weight:600">We'll take you through a few simple questions to help you hire the best professionals.</p>
        </div>
<div class="modal-footer">
   <button id="finalsubmit" class="btn btn-success" >Continue</button>
</div>
</div>

 <form class="searchform" name="search" role="search" method="POST" id="searchform"  action="/search"><input class="abc" required type="text" id="keyword" value="" name="keyword"/><input class="xyz" required type="text" id="word"  value="" name="location"/><input class="qwer" type="button" id="searchsubmit" data-toggle="modal" data-target="#confirm-submit" value="Submit" /></form>

还有 Javascript 代码：

/* when the submit button in the modal is clicked, submit the form */

$('#finalsubmit').click(function(){
    $('#searchform').submit();
});

【问题讨论】：

标签： javascript html forms twitter-bootstrap bootstrap-modal

【解决方案1】：

将模态框放入表单中

<form class="searchform" name="search" role="search" method="POST" id="searchform"  action="/search">
    <input class="abc" required type="text" id="keyword" value="" name="keyword"/>
    <input class="xyz" required type="text" id="word"  value="" name="location"/>
    <input class="qwer" type="button" id="searchsubmit" data-toggle="modal" data-target="#confirm-submit" value="Submit" />
    <div class="modal fade" id="confirm-submit" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-sm">
            <div class="modal-content">
                <div class="modal-body">
                   <p style="font-weight:600">We'll take you through a few simple questions to help you hire the best professionals.</p>
                </div>
                <div class="modal-footer">
                    <button id="finalsubmit" class="btn btn-success" >Continue</button>
                </div>
            </div>
        </div>
    </div>
</form>

【讨论】：

【解决方案2】：

将您的搜索提交输入类型“按钮”更改为输入“提交”并在最终提交按钮单击事件时触发此按钮

$('#finalsubmit').click(function(){
   $('#searchsubmit').trigger("click");
});

我试过这个，它对我有用。

【讨论】：