当我通过Bootstrap模型提交表单时,Html"required"属性不起作用

Question

我有一个html表单,它通过一个bootstrap模式提交,当我单击表单中的提交按钮时弹出.提交按钮打开引发通知的引导模式.在该模式中,我有一个"继续"按钮,提交表单,但如果我使用提交模式提交表单字段上的必需属性不起作用.

这是我的模态形式:

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

Answer 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>