jQuery Validation bullet points

Question

我想使用jQuery驗證插件爲每個錯誤消息創建一個項目符號點。

如果至少有一個錯誤，我想附加一系列的項目符號點，每個錯誤一個項目符號點。

errorPlacement: function (error, element) { 
        if(!$(".erorsbox")){ 
        $(".last").append('<div class="errorsbox"></div>"') 
        } else { 
        $(".errorsbox").append("<li>"+error+"</li>"); 
        } 
       } 

Answer 1

我想創建一個使用jQuery驗證插件每個錯誤消息的一個圓點。

然後errorPlacement不是正確的方法。 errorPlacement僅用於處理用於通常出現在每個元素旁邊的所有單個錯誤消息的HTML標記。

如果要創建所有消息的列表，則需要使用errorLabelContainer和wrapper選項。

errorLabelContainer將所有的消息到單個無序列表（ul）你指定的容器內，並把wrapper每個消息到一個列表項（li）元素。只需使用errorLabelContainer，默認消息不會再出現在每個元素旁邊。

$('#myform').validate({ 
    rules: { 
     .... 
    }, 
    errorLabelContainer: "#messageBox", 
    wrapper: "li" 
}); 

DEMO：jsfiddle.net/uc70fncs/

---

編輯：

這是一個有爭議的問題爲errorPlacement不正確的做法，但是，至於爲什麼你的原始功能是不工作，看到我下面的評論...

• 您不能測試這樣一個元素的存在......

  if (! $(".erorsbox")) { ... 
  

  由於元素不存在，$(".erorsbox")只是給你一個空 jQuery對象，這將永遠是true內的條件。所以(! $(".erorsbox"))將總是是false無論存在。

  通常不需要測試對象的存在並以編程方式創建它...只需將空容器元素提前放入標記即可。直到需要時才佔用空間。

  不過，如果你還是堅持使用jQuery測試元素的存在，你可以use length：if ($(".erorsbox").length) { ...

• 你拼寫錯誤errorsbox如上選擇內erorsbox。

• 你有一個流浪的雙引號"之後立即</div>在這一行......

  $(".last").append('<div class="errorsbox"></div>"') 
  

• 的error參數不會喜歡這個工作...

  $(".errorsbox").append("<li>" + error + "</li>"); 
  

  的error參數表示一個jQuery對象，並在您的標記，它會呈現爲<li>[object Object]</li>。要訪問錯誤消息文本，您可以使用error.text()。

  errorPlacement: function(error, element) { 
      if (! $(".errorsbox").length) { 
       $(".last").append('<div class="errorsbox"></div>') 
      } else { 
       $(".errorsbox").append("<li>" + error.text() + "</li>"); 
      } 
  } 
  

  jsfiddle.net/gan5eb5v/

  現在，它的工作，但不是很滿意，因爲錯誤信息將無限地重複自己由於append()被觸發：

如上所述修復所有錯誤後每blur,keyup和click事件發生的errorPlacement。

爲獲得最佳效果，請撥打simply use errorLabelContainer and wrapper as noted above。