2

我正在使用一个表单，在该表单中，我使用 Chosen jQuery 作为启用了“多选”的选择标签，此选择标签的选项是从 Ajax 调用的响应中生成的。除了这个选择标签，还有一个 textarea 字段和另一个带有“单一”选择的选择标签（也通过另一个 Ajax 调用填充，并且未启用选择）。

我还使用了 bootstrapValidator 来验证这个表单。面临的问题是文本区域和单选已验证，但所选的多选未得到验证。多选通过 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 调用填充其选项后，请帮助弄清楚如何在启用选择的多选标记上启用验证。

4

1 回答 1

0

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

  1. 选择不使用原始选择/输入。它确实在其上显示：无，并为用户输入创建自己的 div。按照此处的建议，您需要使用隐藏字段进行验证。添加：

    $.validator.setDefaults({ 忽略: ":hidden:not(select)" });

  2. 然后，对所选字段的验证工作正常，但您的 ajax 异步修改会破坏它。Validate 选择您在用户更改时填充下拉列表并为其分配成功类。避免它的一种方法是使用jquery 工具箱中的when执行异步后延迟验证。包装您的 ajax 调用并验证函数中的初始化：

    $.when(populateAjaxSelects()).then(function(){ initialiseValidate(); });

编辑：好的。我使用jQuery Validate而不是引导验证器。我认为你在这里处理同样的一般问题。

于 2015-05-25T10:02:14.157 回答