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

Question

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

如果您首先开始在电子邮件的搜索字段中输入然后select输入，则表单会提交，但如果您不在搜索栏中输入而只是 select 它从列表中（不输入任何内容），表单将不会提交...这是表单的样子（简化版本，但仍然无法正常工作）：

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

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

如果我使用 console.log($("#" + "form-author-email").val()); 我仍然得到值 selected，所以我不明白问题出在哪里。

Answer 1

我找到了问题。我添加了一个 jQuery 验证函数（对于所有输入字段），它使用 e.preventDefault(); 并添加错误样式-class 如果输入为空，如果他们没有在搜索栏中输入任何内容，它总是会出现这种情况。我在下面添加了代码，以防有人做过同样的事情：

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

    });


});

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

Can't submit form with data-live-search as true (Bootstrap-select)

html

javascript

forms

submit

bootstrap-select