javascript - 无法提交 data-live-search 为 true 的表单(Bootstrap-select)

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 验证函数(适用于所有输入字段)并添加了如果输入为空，则会出现错误样式类，如果他们没有在搜索栏中输入任何内容，则始终会出现这种情况。我添加了下面的代码，以防有人做了同样的事情:

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

    });


});