jquery - Bootstrap 3 验证状态以及使用 Chosen 插件的 JQuery 验证表单

Question

背景

• 我有一个表单，正在使用 JQuery Validate Plugin 进行验证.
• 除文本区域外，所有表单控件都是必需的。
• 我正在使用 Bootstrap 3 验证状态来设置正在验证的表单控件的样式。
• 对于选择控件，我使用 Chosen Select Plugin

问题

我无法弄清楚如何解决以下问题:

1- 防止文本区域控件应用成功验证状态，因为此表单控件未进行验证，因为它是可选的。

(要在下面的 JSFiddle 中重现问题，请单击带有空表单的“提交”按钮)

2- 将错误验证状态应用于下拉列表的边框。现在只有标签应用了错误验证状态。

3 - 删除错误验证状态和错误消息，并在用户从下拉列表中选择选项时应用成功类。现在错误消息和错误类别仍然存在。

JSFiddle

我创建了一个JSFiddle来说明问题。

HTML

<div class="container" role="main">
    <!-- Contents of the popover associated with the task name text input -->
    <div id="namePopoverContent" class="hide">
        <ul>
            <li><small>...</small></li>
            <li><small>...</small></li>
        </ul>
    </div>

    <form class="form-horizontal" method="post" action="" id="taskForm">
        <div class="row">
            <div class="col-md-9">
                <div class="form-group">
                    <label for="taskName" class="control-label col-md-1">Name</label>
                    <div class="col-md-11">
                        <input type="text" class="form-control taskNameValidation" id="taskName" name="taskName" autofocus required data-toggle="popover">
                    </div>
                </div>
            </div>
            <div class="col-md-3"></div>
        </div>

        <div class="row">
            <div class="col-md-9">
                <div class="form-group">
                    <label for="taskDataset" class="col-md-1 control-label">Dataset</label>
                    <div class="col-md-11">
                        <select class="form-control chosen-select taskDatasetValidation" data-placeholder="Choose a dataset" name="taskDataset" id="taskDataset" required>
                            <option value=""></option>
                            <option value="runnableDataset_Id1">Dataset 1</option>
                            <option value="runnableDataset_Id2">Dataset 2</option>
                            <option value="runnableDataset_Id3">Dataset 3</option>
                            <option value="runnableDataset_Id4">Dataset 4</option>
                        </select>
                    </div>
                </div>
            </div>
            <div class="col-md-3"></div>
        </div>
        <div class="row">
            <div class="col-md-9">
                <div class="form-group">
                    <label for="taskDescription" class="col-md-1 control-label">Description</label>
                    <div class="col-md-11">
                        <textarea class="form-control" name="taskDescription" id="taskDescription" maxlength="1000" rows="4"></textarea>
                    </div>
                </div>
            </div>
            <div class="col-md-3"></div>
        </div>
        <div class="row">
            <div class="col-md-9">
                <div class="pull-right top-margin">
                    <input type="submit" class="btn btn-primary btn-sm" value="Submit" name="taskSetUpSubmit">
                </div>
            </div>
            <div class="col-md-3"></div>
        </div>
    </form>

JS

//Bootstrap popover
$('[data-toggle="popover"]').popover({ 
    trigger: "hover focus",
    container: "body",
    placement: "bottom",
    html: true,
    title: "Name Tips",
    content: function() { return $('#namePopoverContent').html();}
});

//Chosen select plugin
$(function() {
    $('.chosen-select').chosen();
    $('.chosen-select-deselect').chosen({ allow_single_deselect: true });
});

//JQuery validate plugin
$(function() {
    $.validator.setDefaults({
        errorClass: 'text-danger',
        ignore: ':hidden:not(.chosen-select)',
        errorPlacement: function (error, element) {
            if (element.hasClass('chosen-select'))
                error.insertAfter(element.siblings(".chosen-container"));
            else {
                error.insertAfter(element);
            }
        }
    });

    //rules and messages objects
    $("#taskForm").validate({
        highlight: function(element) {
            $(element).closest('.form-group').removeClass('has-success').addClass('has-error');
        },
        unhighlight: function(element) {
            $(element).closest('.form-group').removeClass('has-error').addClass('has-success');
        }
    });

    $('.taskNameValidation').each(function() {
        $(this).rules('add', {
            required: true,
            messages: {
                required: "Provide a space-separated name"
            }
        });
    });

    $('.taskDatasetValidation').each(function() {
        $(this).rules('add', {
            required: true,
            messages: {
                required: "Choose a dataset"
            }
        });
    });
});

我一直在努力解决这个问题，但没有任何运气。任何帮助将不胜感激。

Answer 1

1. Prevent the textarea control from being applied the success validation state since this form control is not being validated as it is optional.

   空的textarea是“有效的”，因为您的验证表明空字段是有效的，因此它是绿色的。您可以有条件使用highlight和unhighlight，这样它就不会应用于您的textarea。但是，当您的 maxlength 规则被评估时，它将不起作用。 据我所知，当该字段在技术上“有效”但仍为空时，没有任何解决方法会导致取消突出显示被忽略。这个插件...一旦表单被评估，字段要么是“有效”，要么是“无效”，没有介于两者之间的。

   编辑:您可以使用自定义 有条件地在 textarea 上应用 highlight 和 unhighlight:空白 选择器并将一个类应用于此“可选”元素。然后，您仍然会得到红色和绿色轮廓，但前提是填写此“可选”字段和/或评估您的规则。

   highlight: function (element) {
       if (! ($(element).hasClass('optional') && $(element).is(':blank'))) {
           $(element).closest('.form-group').removeClass('has-success').addClass('has-error');
       }
   },
   unhighlight: function (element) {
       if (! ($(element).hasClass('optional') && $(element).is(':blank'))) {
           $(element).closest('.form-group').removeClass('has-error').addClass('has-success');
       }
   }
   

2. Apply the error validation state to the border of the dropdown list. Right now only the label gets the error validation state applied.

   您需要查看渲染的 DOM 并找到动态创建的 Chosen 元素。然后，您需要编写 jQuery 来遍历此元素，并通过 highlight 和 unhighlight 有条件地应用适当的类。

   highlight: function (element) {
       if ($(element).hasClass('chosen-select')) {
           $(element).siblings('.chosen-container').removeClass('has-success').addClass('has-error');
       }
       $(element).closest('.form-group').removeClass('has-success').addClass('has-error');
   },
   unhighlight: function (element) {
      if ($(element).hasClass('chosen-select')) {
          $(element).siblings('.chosen-container').removeClass('has-error').addClass('has-success');
      } 
      $(element).closest('.form-group').removeClass('has-error').addClass('has-success');
   }
   

   上面的代码将has-error和has-success类应用到渲染的Chosen div元素;你只需要调整你的CSS，这样就有一个红色边框。否则，请为此编写您自己的 CSS 类，就像我在下面的演示中所做的那样。相应调整。

3. Remove the error validation state and error message, and apply the success class when the user chooses an option from the dropdown list.

   您必须编写一个 change 处理程序，以便在每次发生更改时调用 select 元素上的 .valid() 方法。这是因为您正在与呈现的选择列表而不是实际的 select 元素进行交互。否则，jQuery Validate 插件无法正确触发。

   $('.chosen-select').on('change', function () {
       $(this).valid();
   });
   

演示:https://jsfiddle.net/jxvqsodz/7/