Question

上下文

我有一张表单，我使用JQuery Validate Plugin验证。
除textarea外，所有表单控件都是必需的。
我使用Bootstrap 3验证状态来设置要验证的表单控件的样式。
对于选择控件，我使用Chosen Select Plugin

问题

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

1-防止textarea控件被应用于成功验证状态，因为此表单控件未被验证，因为它是可选的。

（要在下面的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

防止textarea控件应用于成功验证状态，因为此表单控件未被验证，因为它是可选的。

空textarea是“有效”，因为您的验证表明空字段有效，因此它是绿色的。您可以有条件地使用highlight和unhighlight，以便它不会应用于您的textarea。但是，在评估maxlength规则时，它将无法运行。 ~~我知道没有一种解决方法会导致unhighlight在技术上“有效”且仍然为空时被忽略。~~此插件中没有提供“可选”条件/状态。 ..一旦评估了表单，字段就是“有效”或“无效”，两者之间没有任何内容。

编辑：您可以使用自定义highlight选择器在unhighlight上有条件地应用textarea和:blank并将类应用于此“可选的“元素。然后你仍然会得到红色＆amp;绿色轮廓，但仅在填写此“可选”字段和/或评估您的规则时。
```
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');
    }
}
```

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

您需要查看渲染的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类应用于呈现的选定div元素;你只需要调整你的CSS，以便有一个红色边框。否则，就像我在下面的演示中所做的那样，为此编写自己的CSS类。相应调整。

删除错误验证状态和错误消息，并在用户从下拉列表中选择一个选项时应用成功类。

每次更改时，您必须编写一个change处理程序，在.valid()元素上调用select方法。这是因为您正在与呈现的选择列表进行交互，而不是实际的select元素。否则，jQuery Validate插件未正确触发。
```
$('.chosen-select').on('change', function () {
    $(this).valid();
});
```

DEMO：https://jsfiddle.net/jxvqsodz/7/

Bootstrap 3验证状态，使用经过JQuery验证的表单，使用Chosen插件

1 个答案: