Twitter Bootstrap和jQuery驗證插件 - 使用class =「控制組錯誤」

Question

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

我想利用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 here，顯示這是行動，如果有幫助。

Answer 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); 
     } 
    }); 
}); 

Answer 2

要使用控制組的方式使用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); 
     } 
    });