僅使用css將元素移動到容器頂部

我正在使用happy.js進行表單驗證。發生錯誤時，具有「unhappyMessage」類的跨度將直接放置在未通過驗證的表單元素之前。在HTML最終看起來是這樣的：僅使用css將元素移動到容器頂部

<form id="myForm"> 
    <label for="text1">Label 1</label><br /> 
    <span id="text1_unhappy" class="unhappyMessage">Error message</span> 
    <input id="text1" type="text" /> 
    <br /> 
    <label for="text2">Label 2</label><br /> 
    <span id="text2_unhappy" class="unhappyMessage">Error message</span> 
    <input id="text2" type="text" /> 
</form>

，直到發生錯誤時，<span>■不要露面。我想用css來的錯誤信息莫名其妙地過濾到父的頂部，彷彿它進行編碼是這樣的：

<form id="myForm"> 
    <span id="text1_unhappy" class="unhappyMessage">Error message</span><br /> 
    <span id="text2_unhappy" class="unhappyMessage">Error message</span><br /> 
    <label for="text1">Label 1</label><br /> 
    <input id="text1" type="text" /> 
    <br /> 
    <label for="text2">Label 2</label><br /> 
    <input id="text2" type="text" /> 
</form>

注意，我想使每個.unhappyMessage出現在自己的行以及。有沒有一種只有CSS的方法才能做到這一點？

注意：對於那些想知道的人，我只想使用css，因爲我必須做一些逆向工程才能使用javascript工作，因爲它似乎是我通過提供的唯一事件happy.js不是創建錯誤消息的唯一時間。

來源

2012-04-05 benekastah

Css不會爲您提供解決方案。如果您無法輕鬆訪問活動代表團，請查找其他表單驗證程序。或者查看代碼，看看能否找出解決辦法。

編輯：
看着happy.js頁面，它提供了一個回調函數供您指定是否需要。

不高興（功能）：當表單提交嘗試，但任何領域失敗證明，確認被觸發的回調。

因此，傳遞一個函數，該函數將prepends所有錯誤消息。

來源

2012-04-05 01:05:13

這就是我正在使用的回調。它似乎只在窗體實際提交時才被調用，這比編輯錯誤消息的頻率低。 – benekastah 2012-04-05 01:17:20

該腳本相當短，只是使搜索錯誤的腳本的一部分也稱爲不愉快的回調。 – 2012-04-05 01:30:46

最後我只是決定爲每個表單元素的'blur'事件註冊回調。在那一點上，我發現了任何新的錯誤消息，並將它們移動到窗體頂部的單獨容器中。 – benekastah 2012-04-05 01:39:55

僅使用css將元素移動到容器頂部

回答

相關問題