樣式化jQuery驗證錯誤消息

我已經使用Jade創建了一個表單頁面，並且正在使用jQuery驗證插件進行驗證。樣式化jQuery驗證錯誤消息

我想使用Bootstrap來設計我的錯誤消息。我想使用.has-error類和.has-success類。這些必須用於父級div和.form-group。更多詳情here。

我一直在玩errorClass，errorElement，errorContainer，...選項，但我似乎無法找到合適的組合。我在這裏錯過了什麼？

這是我的形式：

form#signupForm.form-horizontal(method='post', action='') 
    .form-group 
     label.col-sm-2.control-label(for='firstName') 
      | First Name: 
     .col-sm-10 
      input#firstName.form-control(type='text', placeholder='John',name='firstName') 

    .form-group 
     label.col-sm-2.control-label(for='lastName') 
      | Last Name: 
     .col-sm-10 
      input#lastName.form-control(type='text', placeholder='Doe', name='lastName') 

    .form-group 
     .col-sm-2.control-label 
      button.btn.btn-default(type='submit') 
       | Submit

我在驗證代碼嘗試這樣做：

errorElement: 'div', 
errorClass: 'has-error',

來源

2014-12-02 JNevens

時遇到了問題，根據他們的階級或增加一個元素類上時，有一個錯誤的造型元素？ – Gezzasa 2014-12-02 08:26:59

將該類添加到某個元素 – JNevens 2014-12-02 08:35:49

關於這個問題的一個想法 - 您可以通過擺脫翡翠並僅顯示生成的HTML來改進它。除非翡翠是問題的一部分，否則它並沒有真正添加任何問題。 – Ryley 2014-12-02 21:48:01

你要找的選項errorPlacement，可能與success選項結合使用：

自定義創建的錯誤標籤的位置。第一個參數：創建的錯誤標籤作爲jQuery對象。第二個參數：將無效元素作爲jQuery對象。

例如，你可以這樣做：

$("#signupForm").validate({ 
    errorPlacement: function(error, element) { 
    element.closest("div.form-group").removeClass('has-success').addClass('has-error'); 
    }, 
    success: function(error, element) { 
    $(element).closest("div.form-group").addClass('has-success').removeClass('has-error'); 
    } 
});

編輯：我注意到：1）舊版本的成功的功能都沒有通過element所有，並在較新的，這是一個DOMElement，而不是一個jQuery對象，所以它必須包裝在$(element)中。

工作例如：http://jsfiddle.net/ryleyb/7epd44de/

來源

2014-12-02 16:12:52 Ryley

當我只使用'errorPlacement'選項時，表單工作正常（除了'has-error'類永遠不會消失）。但是當我添加'success'選項時，表單是從1值正確的那一刻開始提交的（其他錯誤或空的） – JNevens 2014-12-03 14:05:57

是的，我建議''success'選項導致它拋出錯誤，我相信！查看我的編輯... – Ryley 2014-12-03 16:43:09

Ryley，'highlight'和'unhighlight'是切換這些類的最佳回調函數，**不是**'errorPlacement'和'success'。 'highlight/unhighlight'函數甚至已經有了'errorClass'和'validClass'參數。 – Sparky 2014-12-03 16:56:58

樣式化jQuery驗證錯誤消息

回答

相關問題