【发布时间】：2015-08-13 09:51:49
【问题描述】：
上下文
- 我有一个使用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"
}
});
});
});
我一直在努力解决这个问题，但没有任何运气。任何帮助将不胜感激。
【问题讨论】：
标签： jquery twitter-bootstrap jquery-validate jquery-chosen