欧芹模式正则表达式验证

时间:2014-07-21 13:58:54

标签: javascript validation parsley.js

我想知道是否有人可以提供帮助。我正试图以令人难以置信的基本形式使用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),表格将按预期提交。该页面以空白形式重新呈现(因为它是没有后端的基本笔等)。 Othertimes然而表格根本没有提交。字段值保持不变,绿色突出显示仍然存在。

这种行为似乎很不错!

我的想法是我必须做错事 - 我的例子是一个简单的用例我不能相信欧芹不支持它,或者它的错误。我一定做错了......

非常感谢任何指针,

干杯

1 个答案:

答案 0 :(得分:-1)

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

我有:

<form action="#" ...

问题是action属性,特别是#
当页面最初加载时(或CodePen在其iframe中呈现我的测试页面时),url没有哈希。当我输入太长的数据然后更正它时,欧芹允许提交表单。表单的操作是#,因此url现在在其末尾有#。随后的表单提交是不起作用的!

是的!我应该知道这个!

删除笔中的action属性已修复它,当我在真实应用程序中实现它时,action属性显然将设置为我希望数据提交到的终点。

如上所述,我认为这是部分解决方案。我现在可以看到欧芹在我想要的时候阻止/允许表单提交,并且是一致的 但是,我不认为一致的部分,以及上述不能解决的部分,是用户体验/行为的明显变化。 IE浏览器。当我点击提交时,新鲜的欧芹将验证。但是,如果该字段已经出现验证错误,它将在我键入时进行验证。不确定我喜欢那个......