jquery驗證插件。更改錯誤樣式

Question

我有一個現有的表單，它的字段非常靠近。我想在一個小彈出窗口中獲取錯誤消息，而不是在字段旁邊的常規標籤。

更確切地說，這是我想要的錯誤消息的樣式。

如何找到應用到錯誤消息的樣式，以及如何改變它們任何線索？

在此先感謝。

Answer 1

What you want to achieve比簡單地改變錯誤class或消息樣式稍微複雜。

你必須集中你的errorPlacement和success回調函數努力。見文檔：jqueryvalidation.org/validate

或者，您可以安裝其它插件，會爲你創建這些提示。我用Tooltipster，而是你如何整合工具提示插件依賴於什麼方法是由它的開發者提供。

---

首先，初始化上所有具體form元素Tooltipster插件（with any options），將顯示錯誤：

$(document).ready(function() { 

    // initialize tooltipster on form input elements 
    $('#myform input[type="text"]').tooltipster({ 
     trigger: 'custom', // default is 'hover' which is no good here 
     onlyOne: false, // allow multiple tips to be open at a time 
     position: 'right' // display the tips to the right of the element 
    }); 

}); 

二，使用Tooltipster's advanced options與success: and errorPlacement: callback functions built into the Validate plugin一起自動顯示和隱藏工具提示如下：

$(document).ready(function() { 

    // initialize validate plugin on the form 
    $('#myform').validate({ 
     // any other options & rules, 
     errorPlacement: function (error, element) { 
      $(element).tooltipster('update', $(error).text()); 
      $(element).tooltipster('show'); 
     }, 
     success: function (label, element) { 
      $(element).tooltipster('hide'); 
     } 
    }); 

}); 

工作演示：http://jsfiddle.net/kyK4G/

---

來源：How to display messages from jQuery Validate plugin inside of Tooltipster tooltips?

Answer 2

或許可以開始與這個答案jQuery form validation - CSS of error label

jQuery的驗證參考文檔說

錯誤的信息會通過一個額外的類（選項errorClass）標籤要素處理。

這意味着如果您按照上一個答案中的信息，您可以將錯誤添加到class errorClass的div中。

然後只是適當使用CSS的樣式。

作爲一個好處，你應該熟悉Chrome和/或Firefox的瀏覽器開發工具。這些可以幫助您找到頁面上元素的對象和樣式，並幫助您調試您的JavaScript。

Answer 3

它主要歸結爲CSS。每一個的環繞場到被相對定位的，像這樣的容器：

<div class="fieldContainer"> 
    <label for="phone">Phone Number:</label> 
    <input type="text" name="phone" /> 
</div> 
<div class="fieldContainer"> 
    <label for="phone2">Phone Number:</label> 
    <input type="text" name="phone2" /> 
</div> 

.fieldContainer { 
    position: relative; 
    margin-bottom: 20px; 
} 

然後你就可以進行絕對定位你的錯誤標籤，適用任何你喜歡的其他樣式。

label.error { 
    position: absolute; 
    right: 143px; 
    top: -25px; 
    border: solid 1px #000; 
    background: #fff; 
    box-shadow: 0px 2px 6px rgba(0, 0, 0, .7); 
    padding: 2px 5px; 
} 

下面是一個例子： http://jsfiddle.net/wrxsti85/yD3c3/

希望這有助於！

編輯：這些字段僅設置爲數字，因此觸發錯誤只是將文本放入字段中。