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

Question

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

这是我的模态 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();
});

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>