无法提交数据实时搜索为true的表单（引导程序选择）

Question

我正在制作一个包含类别和子类别的问题报告表。 该表格还要求用户添加他们的电子邮件地址（从列表中）。 该列表的data-live-search = true ，使他们有可能在列表中进行搜索。

如果您首先开始在电子邮件的搜索字段中输入然后选择它，那么该表单将提交。但是，如果您没有在搜索栏中书写，而只是从列表中选择它（不输入任何内容），则该表单将被提交不提交...这是表格的外观（简化版，但仍然无法正常工作）：

<form role="form" name="form" id="form" action="file.php" method="post">

    <!-- AUTHOR NAME -->
    <div class="form-group" id="form-group-author-name">
        <label class="sr-only" for="author-name">Author's name</label>
        <input type="text" name="author-name" id="form-author-name" placeholder="Author's name" class="form-control" required>
    </div>

    <!-- AUTHOR E-MAIL -->
    <div class="form-group" id="form-group-author-email">
        <select class="selectpicker" name="author-email" id="form-author-email" data-width="100%" title="Author's e-mail" data-live-search="true" required>
            <option>email1@example.com</option>
            <option>email2@example.com</option>
            <option>email3@example.com</option>
            <option>email4@example.com</option>
            <option>email5@example.com</option>
        </select>
        <p class="help-block">Search for your e-mail.</p>
    </div>
    <button type="submit" class="btn">Submit</button>
</form>

我还尝试将事件侦听器添加到选择字段，并使用$("#" + "form-author-email").selectpicker('refresh'); 和document.getElementById("form-author-email").value = $("#" + "form-author-email").val(); 以防万一是因为字段没有更新，但是那也不起作用。

如果我使用console.log($("#" + "form-author-email").val()); 我仍然得到选择的值，所以我不明白问题是什么。

Answer 1

我已经解决了问题。 我添加了一个使用e.preventDefault();的jQuery验证函数（用于所有输入字段e.preventDefault(); 并在输入为空时添加了一个错误样式类，如果他们没有在搜索栏中输入任何内容，则总是这样。 如果有人做过同样的事情，我在下面添加了代码：

jQuery(document).ready(function() {

    $('.form input[type="text"]').on('focus', function() {
        $(this).removeClass('error');
    });

    $('.form').on('submit', function(e) {

        $(this).find('input[type="text"]').each(function(){
            if( $(this).val() == "" ) {
                e.preventDefault();
                $(this).addClass('error');
            }
            else {
                $(this).removeClass('error');
            }
        });

    });


});