2014-11-01 22 views
0

如果我創建一個輸入控制是這樣的:在它jQuery驗證 - 如何顯示錯誤的默認標註?

<input type="number"> 

,並鍵入字母,一個錯誤將會顯示在一個彈出式的控制。我已經看到它被稱爲標註,但我不確定這是否是正確的名稱。它看起來像這樣:

enter image description here

但如果我無論是在jQuery Validation Plugin或ASP.NET定義自己的規則,那麼就沒有花哨的彈出了,只是其附加的標籤。它看起來不那麼好,並且與上述不一致。

是否有一種簡單的方法使我的自定義錯誤消息以相同的方式顯示?

+1

這callo ut',實際上它是解釋規範的chromes方式,在某些瀏覽器中,錯誤消息看起來不同或根本不彈出*盯着IE * – MarshallOfSound 2014-11-01 04:36:42

+0

有趣的是,我剛剛在Firefox上進行了測試,您說得對!你介意發佈這個答案嗎? – StefanLundmark 2014-11-01 07:45:09

回答

3

您的圖片僅根據特定瀏覽器版本顯示默認呈現的HTML5驗證(或未呈現)。

http://i.stack.imgur.com/ZGi5z.jpg

才能看到這些彈出式窗口和Chrome瀏覽器的彈出窗口會看起來比Firefox的不同等HTML5驗證配置爲使用HTML5 validation attributes,你要補充瀏覽器必須支持HTML5驗證內嵌像這樣每個input元素...

<input type="number" required="required" max="5" .... 

但是,當您使用the jQuery Validate plugin,它動態地添加novalidate屬性的<form>標籤...

<form novalidate="novalidate" id="myform" .... 

novalidate屬性用於禁用 HTML5的驗證,使jQuery驗證可以接管所有的表單驗證,而不從HTML5的干擾。是的,默認的jQuery Validate標籤是平淡的,但這是「空白畫布」,它允許設計靈活性和跨瀏覽器的一致性和可靠性。見下文。


如果你想看起來更像是彈出窗口你會用HTML5得到錯誤信息,那麼你就可以創建自己的CSS/jQuery的。

報價:「有沒有簡單的方法,使我的自定義錯誤消息,以同樣的方式顯示」

這取決於你是否認爲添加另一個jQuery插件很簡單。您可以將jQuery插件(如qTip2ToolTipster)集成到jQuery Validate中。這些插件有許多選項,主題和CSS,您可以自定義爲最終。雖然每個插件根據其工作方式,操作方法,回調等不同而有所不同,但可能會非常棘手。

下面是一個演示ToolTipster v3(默認 - 無主題)如何輕鬆集成到jQuery中的工作演示驗證:

http://jsfiddle.net/2DUX2/3/

enter image description here

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

1

這是你說什麼是HTML5的功能使用required屬性與你的表單元素

<input required> 

,它會告訴你默認的錯誤消息,但如果你想顯示自定義錯誤消息不是使用title屬性

<input required title="Custom error message"> 

檢查這個URL以獲取更多信息http://demosthenes.info/blog/848/Create-Custom-HTML5-Form-Error-Messages-with-the-Title-Attribute

希望無線會回答你的問題

+0

如果我在數字文本框中鍵入字母,則不會出現。不管怎麼說,還是要謝謝你! – StefanLundmark 2014-11-01 07:48:36

+0

查看我添加的鏈接 – Milind 2014-11-01 08:03:38

+0

再次感謝您的努力。但那仍然不是我所要求的。我問的是如何實現彈出式(或標註,如果你會的話)效果,而不是文字信息。 – StefanLundmark 2014-11-01 09:23:31

1

那是標註「你是指它實際上是鉻合金解釋規範的方式,錯誤信息將有不同或IE不會彈出所有在某些瀏覽器

凝視

+0

我看到一些downvotes對這個答案球員,請留下評論,解釋你爲什麼認爲它是壞的。記住這只是答案標記正確的簡化版本 – MarshallOfSound 2015-06-23 02:37:49