Html "required" attribute doesn't work when i submit a form via a Bootstrap model

Question

I have an html form which gets submitted via a bootstrap modal which pops up when i click the submit button in the form itself . The submit buttons opens the bootstrap modal that throws a notification. In that modal I have a "Continue" button which submits the form but the required attribute on the form fields does not work if I submit it using the submit on modal.

here's my modal n form:

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

And the Javascript code:

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

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

Answer 1

Put The modal Inside The form

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

Answer 2

change your searchsubmit input type"button" to type"submit" and trigger this button on finalsubmit button click event

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

I tried this one and its working for me.