歐芹模式正則表達式驗證

Question

我想知道是否有人可以提供幫助。 我正在嘗試以一種難以置信的基本形式使用parsley.js，並且得到了隨機結果！

基本上，我設置了一個必填（必填）的輸入字段，該字段必須介於1到10個字符之間：

<form action="#" data-parsley-validate="true" method="get">

  <label for="name">Name</label>
  <input type="text" id="name" required="required" pattern="^.{1,10}$"/>
  <input type="submit" />
</form>

（不必擔心名稱字段是否應該超過10個字符-我要做的就是讓基本的歐芹驗證有效）

我在這里http://codepen.io/megsterDotNet/pen/DErmu為此創建了一個CodePen，它有望演示該問題。

我得到的問題是，大多數時間（但不是所有時間都是如此！），如果您更正了錯誤，它將不會提交表格。 所以：

• 加載表格，在名稱字段中輸入字符（超過10個）
• 單擊字段外，但不在提交按鈕上。 請注意，該字段此時尚未得到驗證。
• 單擊提交。 請注意該字段變為紅色，並顯示錯誤消息。
• 現在，單擊進入該字段並從末尾刪除字符，直到少於10個字符。 請注意，驗證行為有所變化，因為它現在可以在您鍵入時進行驗證，因為一旦達到10個字符或更少，該字段就會變為綠色，並且錯誤消息也會消失。
• 現在單擊提交。
• 有時（我會說大約是50/50），表格會按預期提交。 頁面以空白表格重新呈現（因為它是沒有后端的基本筆等）。 但是，有時表格根本不提交。 字段值保持原樣，綠色高亮顯示仍保留。

這種行為似乎是胡扯！

我的想法是我一定做錯了-我的例子是一個簡單的用例，我簡直不敢相信歐芹不支持它，也不知道它有問題。 我一定做錯了什么 ...

任何與此有關的指針將不勝感激，

干杯

內森

Answer 1

我找到了部分解決方案-基本上，我在測試筆中的標記導致了問題！

我有：

<form action="#" ...

問題是動作屬性，尤其是＃
最初加載頁面時（或CodePen在其iframe中呈現我的測試頁面時），該網址沒有哈希值。 當我輸入太長的數據然后更正它時，歐芹允許提交表單。 表單的動作是＃，因此該網址現在在其末尾帶有＃。 隨后的表單提交不起作用！

h！我應該知道這一點！

刪除筆中的action屬性已對其進行了修復，當我要在真實的應用程序中實現該功能時，action屬性顯然將設置為我要向其提交數據的終點。

如前所述，我認為這是部分解決方案。 現在，我可以看到歐芹阻止/允許表單提交，並且保持一致。
但是，我認為不一致的部分以及以上內容未能解決的部分是UX /行為的明顯變化。 IE瀏覽器 當我單擊“提交”時，新鮮字段上的歐芹將進行驗證。 但是，如果該字段已經出現驗證錯誤，它將在我輸入時進行驗證。 不確定我是否喜歡....