2

我使用 Twitter Bootstrap 框架创建了一个表单，并集成了 jQuery Validation Plugin。我有一个表格，其中包含一系列带有单选按钮的是/否问题，我验证这些单选按钮以确保每个问题都不为空 - 这运作良好。

我想利用 Bootstrap class="control-group error" 使错误文本显示为红色，以便对用户突出 - 目前“此字段为必填项”文本为黑色，很难找到。

有一个示例说明我希望如何在此处显示错误文本：

http://twitter.github.io/bootstrap/base-css.html#forms

在本节末尾的“验证状态”下。这是在输入字段后显示红色消息的具体示例（我只希望在他们单击提交按钮后出现错误）：

<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>

这是我的表格显示一个问题：

<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>

我不知道如何将示例与我的表单结合起来，以便如果他们提交表单并且他们没有回答问题，则警报会显示为红色。

我在这里设置了一个 jsFiddle ，如果有帮助，这表明这是行动。

4

2 回答 2

1

使用该errorClass选项将 jQuery Validate 插件设置为您想要class的错误。这将在验证错误时同时应用.control-group和类....error

$(document).ready(function () {
     // initialize the plugin
     $("#inputForm").validate({ 
         errorClass: "control-group error"
     });
});

http://jsfiddle.net/F28PF/1/

请参阅插件选项的文档：http: //jqueryvalidation.org/validate

编辑：

正如所指出的，默认行为将errorClass放在消息和input元素上。

如果您需要在其他东西上切换错误/有效类，您将利用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);
        }
    });
});
于 2013-07-25T15:02:16.227 回答
0

要按照 bootstrap 的预期使用方式使用控制组，您需要设置周围控制组的值。接受的答案并不完全正确，您不想将控制组放在输入本身，而是放在容器上。这段代码应该可以工作。

$("#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);
        }
    });
于 2014-08-22T22:06:01.170 回答