twitter-bootstrap Twitter Bootstrap 和 jQuery 验证插件 - 使用 class="control-group error"
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17858360/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Twitter Bootstrap and jQuery Validation Plugin - use class="control-group error"
提问by user982124
I've created a form using the Twitter Bootstrap framework and have integrated the jQuery Validation Plugin. I have one form with a series of yes/no questions with radio buttons that I validate to ensure each question is not empty - this is working well.
我已经使用 Twitter Bootstrap 框架创建了一个表单并集成了 jQuery 验证插件。我有一个包含一系列是/否问题的表单，其中包含我验证的单选按钮以确保每个问题都不是空的 - 这运行良好。
I would like to leverage the Bootstrap class="control-group error" to make the error text appear in red so it stands out to the user - currently the "This field is required" text is in black and it's hard to locate.
我想利用 Bootstrap class="control-group error" 使错误文本显示为红色，以便向用户突出显示 - 目前“此字段是必需的”文本为黑色，很难找到。
There's an example of how I would like the error text to appear here:
有一个我希望错误文本在此处显示的示例：
http://twitter.github.io/bootstrap/base-css.html#forms
http://twitter.github.io/bootstrap/base-css.html#forms
at the end of this section under "Validation states". Here's the specific example that shows a red message after the input field (I only want the error to appear after they have clicked the Submit button):
在本节末尾的“验证状态”下。这是在输入字段后显示红色消息的具体示例（我只希望在他们单击“提交”按钮后出现错误）：
<div class="control-group error">
<label class="control-label" for="inputError">Input with error</label>
<div class="controls">
<input type="text" id="inputError">
<span class="help-inline">Please correct the error</span>
</div>
</div>
Here's my form showing one question:
这是我的表格，显示了一个问题：
<form class="form-horizontal" method="post" id="inputForm">
<input type="hidden" name="recid" value="1">
<table class="table table-condensed table-hover table-bordered">
<h2>Input Form</h2>
<tr>
<td>Question 1.</td>
<td>
<div class="controls">
<label class="radio inline">
<input type="radio" name="q1" value="Yes" required>Yes </label>
<label class="radio inline">
<input type="radio" name="q1" value="No" required>No </label>
<label for="q1" class="error"></label>
</div>
</td>
<td>Please answer Yes or No</td>
</tr>
</table>
</div>
<div class="control-group">
<div class="controls">
<button type="submit" class="btn btn-primary">Continue</button>
<button type="reset" class="btn">Reset</button>
</div>
</div>
</form>
I can't work out how to combine the example with my form so that if they submit the form and they haven't answered a question the alert appears in red.
我不知道如何将示例与我的表单结合起来，这样如果他们提交了表单并且他们没有回答问题，警报就会显示为红色。
I've setup a jsFiddle herethat shows this is action if that helps.
我在这里设置了一个 jsFiddle ，如果有帮助，它会显示这是一个操作。
采纳答案by Sparky
Use the errorClassoption to set the jQuery Validate plugin to your desired classfor errors. This will apply both .control-groupand .errorclasses upon a validation error...
使用该errorClass选项将 jQuery Validate 插件设置为您想要class的错误。这将在验证错误时同时应用.control-group和.error类...
$(document).ready(function () {
// initialize the plugin
$("#inputForm").validate({
errorClass: "control-group error"
});
});
See documentation for the plugin options: http://jqueryvalidation.org/validate
请参阅插件选项的文档：http: //jqueryvalidation.org/validate
EDIT:
编辑：
As pointed out, the default behavior puts the errorClasson the message and the inputelement.
正如所指出的，默认行为将errorClass放在消息和input元素上。
If you need to toggle the error/valid classes on something else, you would leverage the highlightand unhighlightcallback functions.
如果您需要在其他东西上切换错误/有效类，您将利用highlight和unhighlight回调函数。
$(document).ready(function () {
// initialize the plugin
$("#inputForm").validate({
errorClass: "control-group error",
highlight: function (element, errorClass, validClass) {
$(element).closest(".control-group").addClass(errorClass).removeClass(validClass);
},
unhighlight: function (element, errorClass, validClass) {
$(element).closest(".control-group").addClass(validClass).removeClass(errorClass);
}
});
});
回答by OneCleverMonkey
To use the control-group the way bootstrap was intended to be used, you want to set the value of the surrounding control-group. The accepted answer isn't quite right, you don't want to put control-group on the input itself, but the container. This code should work.
要以引导程序的使用方式使用控制组，您需要设置周围控制组的值。接受的答案不太正确，您不想将控制组放在输入本身上，而是放在容器上。这段代码应该可以工作。
$("#page-form").validate({
highlight: function (element, errorClass, validClass) {
$(element).closest(".control-group").addClass(errorClass).removeClass(validClass);
},
unhighlight: function (element, errorClass, validClass) {
$(element).closest(".control-group").addClass(validClass).removeClass(errorClass);
}
});
