欧芹模式正则表达式验证

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 个字符 - 我要做的只是让基本的欧芹验证工作）

我在这里创建了一个 CodePen http://codepen.io/megsterDotNet/pen/DErmu，希望能证明这个问题。

我遇到的问题是，如果您纠正了错误，大多数时候（但不是所有时候！）它不会提交表单。所以：

• 加载表单，在名称字段中输入大量字符（超过 10 个）
• 在字段外单击，但不在“提交”按钮上。请注意，此时该字段未得到验证。
• 单击提交。请注意，该字段变为红色并出现错误消息。
• 现在单击该字段并从末尾删除字符，直到少于 10 个字符。请注意，验证行为发生了变化，现在它在您键入时进行验证，因为一旦您达到 10 个字符或更少，该字段就会变为绿色并且错误消息会消失。
• 现在单击提交。
• 有时（我会说大约是 50/50），表单会按预期提交。该页面使用空白表单重新呈现（因为它是没有后端的基本笔等）。但有时表格根本不提交。字段值保持原样，绿色突出显示保持不变。

这种行为看起来很古怪！

我的想法是我一定做错了——我的例子是一个如此简单的用例，我无法相信欧芹不支持它，或者它有问题。我一定是做错了什么……

任何与此相关的指针将不胜感激，

干杯

内森

Answer 1

我找到了部分解决方案 - 基本上是我的测试笔中的标记导致了问题！

我有：

<form action="#" ...

问题是动作属性，特别是#
当页面最初加载时（或者当 CodePen 在其 iframe 中呈现我的测试页面时），url 没有哈希值。当我输入太长的数据然后更正它时，欧芹允许提交表单。表单的动作是#，所以现在url的末尾有#。随后的表单提交是无效的！

Doh！，我早该知道的！

删除pen中的action属性已经修复了，当我在一个真正的应用程序中实现这个时，action属性显然会设置为我想要提交数据的终点。

如前所述，我认为这是部分解决方案。我现在可以看到欧芹阻止/允许表单提交，并且是一致的。
然而，我认为不一致且上述内容无法解决的部分是 UX/行为的明显变化。 IE。当我单击提交时，将在新鲜的字段上验证欧芹。但是，如果该字段已经出现验证错误，它将在我键入时进行验证。不知道我喜欢那个....