Twitter Bootstrap和jQuery驗證插件 - 位置或錯誤文本

Question

我使用Twitter Bootstrap框架創建了一個表單並集成了jQuery驗證插件。我有一個帶有單選按鈕的一系列是/否問題的表單，我會驗證它確保每個問題都不是空的 - 這很好。

如果用戶對某個問題回答「是」，則表單中的某個表單會出現一些隱藏的表格行。我似乎無法控制這些頁面上錯誤文本的位置（「此字段是必需的」），並且錯誤文本沒有按照我的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" 
});