0

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

如果用户对某个问题回答“是”，则其中一种表格会出现一些隐藏的表格行。我似乎无法控制这些页面上错误文本（“此字段是必需的”）的位置，并且根据我的 CSS，错误文本不是红色的。

这是html：

<form class="form-horizontal" action="#" method="post" id="additional">
  <input type="hidden" name="recid" value="1">

  <table class="table table-condensed table-hover table-bordered">


      <tr>
      <td><strong>Question 1</strong></td>
      <td>please answer yes or no to this question</td>
      <td>
          <div class="controls">
              <label class="radio inline">
      <input type="radio" name="AE_W4" id="AE_W4Yes" value="Yes" required>Yes         </label>
              <label class="radio inline">
      <input type="radio" name="AE_W4" id="AE_W4No" value="No" required>No        </label>
              <label for="AE_W4" class="validateError"></label>
    </div>
      </td>
      </tr>


      <tr id="adverseEventDetails">
      <td></td>
      <td>Please enter the description here</td>
      <td>
          <div class="controls">
      <textarea name="AE_Details_W4" id="AE_Details_W4" rows="3" required></textarea>
      <label for="AE_Details_W4" class="validateError"></label>
    </div>
      </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>

这是脚本：

$().ready(function() {
    // validate the form when it is submitted
    $("#additional").validate();
        errorClass: "validateError";

    if($("#AE_W4Yes:checked").length != 0){
                // yes is checked... show the dependent fields  
                    $("#adverseEventDetails").show(); 
                }else{
                    // hide it and blank the fields, just in case they have something in them
                    $("#adverseEventDetails").hide(); 
                    $("#AE_Details_W4").val("");
                }


    $("#AE_W4Yes").click(function () {
        $("#adverseEventDetails").show();
    });

    $("#AE_W4No").click(function () {
        $("#adverseEventDetails").hide();
        $("#AE_Details_W4").val("");
    });

});

我在这里设置了一个 jsFiddle来演示这一点。

4

1 回答 1

2

你的代码：

// validate the form when it is submitted
$("#additional").validate();
    errorClass: "validateError";

您在上面的代码中有严重的语法错误。

没有任何问题$("#additional").validate();，它只是初始化插件。

但是，errorClass: "validateError";不能像这样单独在 JavaScript 中浮动。如果您想使用该errorClass 选项，则必须按照文档使用它，并将其与任何其他规则和/或选项一起在里面 列出.......validate()

// .validate() initializes the plugin
$("#additional").validate({
    // the rules and/or options for Validate() get listed here,
    // and they are separated by commas, not semicolons.
    errorClass: "validateError"
});
于 2013-07-28T17:57:44.220 回答