Question

我使用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 here来证明这一点。

Answer 1

您的代码：

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

您的代码中存在严重的语法错误。

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

然而，errorClass: "validateError";不能像你那样在你的JavaScript中漂浮。如果您想使用errorClass 选项，则必须使用as per documentation，并在 .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" });

Twitter Bootstrap和jQuery Validation插件 - 位置或错误文本

1 个答案: