Question

我正在使用一个表单，我将选择的jQuery用于启用了“multiselect”的select标签，此select标签的选项是从Ajax调用的响应中生成的。除了这个select标签外，还有一个textarea字段和另一个带有'single'select的select标签（也通过另一个Ajax调用填充，而不是选择启用）。

我还使用了bootstrapValidator来验证这个表单。面临的问题是textarea和单一选择被验证，但所选择的多选未经验证。多选通过Ajax响应进行填充，Chosen也会在其上应用，但是在提交时没有得到验证。

HTML

<form role="form" id="createQueForm" enctype="multipart/form-data" novalidate>
    <div class="control-group form-group">
         <label class="control-label">Question Text</label>
         <textarea name="questionText" class="form-control" name="question" rows="3" ></textarea>
    </div>

    <div class="control-group form-group">
        <label class="control-label">Select Tags (upto 3)</label>
        <select multiple class="form-control" id="tags_select" name="tags" >
        </select>
    </div>

    <div class="control-group form-group">
        <label class="control-label">Asking as (User) :</label>
        <select class="form-control" id="user_select" name="user" >
            <option value="">Select User</option>
        </select>
    </div>
    <button type="submit" class="btn btn-default">Create</button>
</form>

JAVASCRIPT

$(document).ready(function() {

    $.ajax({
        url: "http://localhost:8080/xoxo/api/getAllTags",
        type: "POST",
        dataType: "json",
        crossDomain: true,
        contentType: "application/x-www-form-urlencoded",
        cache: false,
        beforeSend: function (xhr) {
            /////   Authorization header   /////
            xhr.setRequestHeader("Authorization", "Bearer "+token);
        },
        success: function (data) {
            var tags = data.tags;
            $.each(tags,function(i,val){
                $('#tags_select').append('<option value="'+val.name+'">'+val.name+'</option>')
            });
            $('#tags_select').chosen({no_results_text: "Oops, nothing found!",max_selected_options: 3});

        },
        error: function (jqXHR, textStatus, errorThrown) {

        }
    });

    $.ajax({
        url: "http://localhost:8080/xoxo/api/getAllUsers",
        type: "GET",
        dataType: "json",
        crossDomain: true,
        contentType: "application/x-www-form-urlencoded",
        cache: false,
        beforeSend: function (xhr) {
            /////   Authorization header   /////
            xhr.setRequestHeader("Authorization", "Bearer "+token);
        },
        success: function (data) {
            var users = data.users;
            $.each(users,function(i,val){
                $('#user_select').append('<option value="'+val.id+'">'+val.fName+' '+val.lName+'</option>')
            });

        },
        error: function (jqXHR, textStatus, errorThrown) {

        }
    });

    $('#createQueForm').bootstrapValidator({
        live: 'disabled',
        // This option will not ignore invisible fields which belong to inactive panels
        exclude: ':disabled',
        fields: {
            question: {
                validators: {
                    notEmpty: {
                        message: 'Question Text is required.'
                    }
                }
            },
            tags: {
                validators: {
                    notEmpty: {
                        message: 'Tags are required.'
                    }
                }
            },
            user: {
                validators: {
                    notEmpty: {
                        message: 'Asking User is required.'
                    }
                }
            }
        }
    })
    .on('success.form.bv', function(e) {
        // Prevent form submission
        e.preventDefault();

        // Get the form instance
        var $form = $(e.target);

        // Get the FormValidation instance
        var bv = $form.data('bootstrapValidator');

        // Use Ajax to submit form data
        var question = new Object();
        question.questionText = $('textarea[name=questionText]').val();
        question.tags = $('#tags_select').val();
        question.userId = $('#user_select').val();
        $.ajax({
            url: "http://localhost:8080/xoxo/api/createQuestionOnWeb",
            data: question,
            type: "POST",
            dataType: "json",
            crossDomain: true,
            contentType: "application/x-www-form-urlencoded",
            cache: false,
            beforeSend: function (xhr) {
                /////   Authorization header   /////
                xhr.setRequestHeader("Authorization", "Bearer "+token);
            },
            success: function (data) {
                if(data.status == "success"){
                    $('.alert-danger').hide();
                    $('.alert-success').show();
                    location.href = "questions_list.php";
                }else{
                    $('.alert-success').hide();
                    $('.alert-danger').html(data.errorReason).show();
                }
            },
            error: function (jqXHR, textStatus, errorThrown) {
                $('.alert-success').hide();
                $('.alert-danger').html('Oops..! Something went wrong.').show();
            }
        });
    });     
});

请帮助确定如何在通过Ajax调用填充其选项后启用选择的多选标记上启用验证。

Answer 1

遇到类似的问题，无法找到答案。以下是我的解决方案，也许它可以帮助某人。这里有两个问题需要解决：

选择不使用原始选择/输入。它显示：none，并为用户输入创建自己的div。遵循建议here，您需要使用隐藏字段进行验证。添加：

$。validator.setDefaults（{ignore：“：hidden：not（select）”}）;
然后，对所选字段的验证工作正常，但您的ajax异步修改会中断它。验证在用户更改时选择填充下拉列表并为其分配成功类。一种避免它的方法是在使用jquery的工具箱中的when执行异步执行后延迟验证。包装你的ajax调用并验证函数中的初始化：

$。当（populateAjaxSelects（））。然后（函数（）{ initialiseValidate（）; }）;

jQuery Validate

Ajax动态列表填充选择jQuery并使用Bootstrap Validator验证它

1 个答案: