我將如何使用jQuery重新顯示隱藏的div持有，並以每次1所示的錯誤消息的新位置的錯誤信息？

我有一個註冊表格，我使用Ruby on Rails的寶石使它很難定義這些形式錯誤顯示的位置。我已經張貼在這裏的問題，但沒有找到一個解決方案。我將如何使用jQuery重新顯示隱藏的div持有，並以每次1所示的錯誤消息的新位置的錯誤信息？

以下是當前顯示錯誤消息的方式。驗證是在刷新頁面的情況下進行的。一旦錯誤得到糾正並且單擊另一個字段，錯誤消息將消失。這是所有罰款至今：

enter image description here

我希望做的是有我的錯誤消息顯示1在時間，但在一個完全不同的位置（略下我的提交按鈕）Facebook的風格。

我想到的一個想法是在第一次點擊提交按鈕時隱藏這些消息，以便顯示錯誤消息。然後讓消息再次立即顯示，但在我希望他們的區域中，但一次只顯示一個。

我在想，如果jQuery的可以做到這一點？

到目前爲止，在控制檯我已經成功地得到錯誤信息隱藏馬上被點擊時提交以下材料：

$("#new_user").submit(function() { 
    $(".field_with_errors").find(".message").hide() 
});

現在我會用.show（）再次顯示錯誤消息，但這個時候我想用我擅長的CSS將錯誤消息放在我想要的位置，但一次只顯示一條錯誤消息。

我很新2 jquery，我已經做了大量的閱讀，並在lynda.com上都有javascript和jquery教程，還通讀了api，但我發現最好的學習方法是讓我個人事情付諸實踐。

到目前爲止，我開始意識到jquery對我有多大的益處。無論如何，我想知道是否有人可以給我一個我如何能夠實現我想達到的例子。

只有使用.css纔可以訪問所有css規則嗎？如果是這樣，那麼我有一個「通知」類正確定位在我的錯誤消息的形式下。

然後，它只是一個讓錯誤消息逐一顯示的問題。

我會很感激一些很好的例子。

親切的問候

來源

2012-03-22 LondonGuy

我不知道這是否是你所要求的，但你在找一個。 http://api.jquery.com/css/和b。 http://api.jquery.com/addClass/ – m90 2012-03-22 13:12:27

你有沒有試過[jQuery驗證]（http://docs.jquery.com/Plugins/Validation）？ – jrummell 2012-03-22 14:22:34

我結束了在我的CSS和以下js中的.message中使用display：none。

$("#new_user").submit(function() { 
    errorMsg = $(".field_with_errors").find(".message"); 
    $("#signupFormContainer").find(".notify").addClass("error").text(errorMsg.html()); 
});

我大致看了在我signupformcontainer的通知類添加類錯誤與文本從ERRORMSG值HTML。

來源

2012-03-22 16:48:41 LondonGuy

如果「通知」類將會爲您處理CSS定位，那就試試這個：

$("#new_user").submit(function() { 
    $(".field_with_errors").find(".message").hide().eq(0).addClass("notify").show(); 
});

等式（0），我們的目標的第一條消息，然後給它類「通知」，以便它的位置正確，然後顯示它。我假設當用戶更正與此錯誤消息相關的字段時，創建錯誤消息的插件將刪除它。在這種情況下，當用戶再次點擊提交時，提交處理程序會將隊列中的下一條消息（現在是第一條消息）作爲目標。

來源

2012-03-22 14:19:46 robmisio

我有不同的建議。你可以;

將每條消息嵌套在<span>或<a>中，併爲每個消息分配一個唯一的ID。
在頁面CSS中設置這些ID的默認樣式爲visibility: hidden
然後在您的JavaScript中，您可以使用;

$('#your_id').css({'visibility': 'visible'});

顯示特定錯誤消息和

$('#your_id').css({'visibility': 'hidden'});

隱藏錯誤消息。

希望這有助於... :)

來源

2012-03-22 17:04:36

我將如何使用jQuery重新顯示隱藏的div持有，並以每次1所示的錯誤消息的新位置的錯誤信息？

回答

相關問題