Bootstrap 3验证状态与使用所选插件的JQuery验证表单

上下文

• 我有一个正在使用的表单
• 除文本区域外，所有表单控件都是必需的
• 我使用Bootstrap3验证状态来设置正在验证的表单控件的样式
• 对于select控件，我使用

问题

我很难想出如何解决以下问题：

1-禁止将textarea控件应用于成功验证状态，因为此表单控件是可选的，因此未进行验证

（要在下面的JSFIDLE中重现该问题，请单击带有空表单的Submit按钮）

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

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

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>

我一直在苦苦挣扎，没有任何运气。任何帮助都将不胜感激

禁止将textarea控件应用于成功验证状态，因为此表单控件是可选的，因此未进行验证

空的

textarea

是“有效的”，因为您的验证表明一个空字段是有效的，因此它是绿色的。您可以有条件地使用

高亮显示

和

取消高亮显示

，这样它就不会应用于您的

文本区域

。但是，当计算

maxlength

规则时，它将不起作用。据我所知，当字段在技术上是“有效”但仍然为空时，没有任何解决方法会导致

取消高亮显示

。此插件中没有提供“可选”条件/状态。。。对表单求值后，字段为“有效”或“无效”，两者之间没有任何内容

编辑：您可以使用自定义

：空白

选择器有条件地应用

高亮显示

和

取消高亮显示

，并将类应用于此“可选”元素。然后，您仍然会得到红色和绿色的轮廓，但只有在填写此“可选”字段和/或评估您的规则时

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并找到动态创建的所选元素。然后，您需要编写jQuery来遍历该元素，并通过

高亮显示

和

取消高亮显示

有条件地应用适当的类

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类。相应地调整

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

每次更改

select

元素时，必须编写一个

change

处理程序来调用

.valid（）

方法。这是因为您正在与呈现的选择列表交互，而不是与实际的

select

元素交互。否则，jQuery验证插件不会正确触发

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

---

演示：

非常感谢您的帮助。我对所有web开发技术都是新手，所以我非常感谢您的详细解释。@user2669241，不客气。谢谢你花时间写下你的问题。这可能是一个愚蠢的问题，但我还是会问的。您说过“您需要查看呈现的DOM并找到动态创建的所选元素”，这是有道理的，但是我怎么做呢？当时调试时，我查看了页面源代码，但只能看到代码中的内容：静态创建的控件。我想我的问题是如何调试动态创建的元素。谢谢@user2669241:我不能说得更具体，因为所有浏览器都有不同的工具和GUI。但是，在浏览器的开发人员工具中，可以选择检查DOM，而不是源代码。谢谢！我会调查的。

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