如何覆盖 Parsley JS 焦点行为

Question

当新用户进入页面并输入系统中已有的电子邮件时，我想执行以下操作：

显示错误信息。
显示箭头。
然后移动焦点（光标）到密码字段。

使用 jQuery 我可以将焦点移到密码字段，但几毫秒后，焦点又被拉回到 email 包含 Parsley 错误消息的字段。

我曾尝试使用 data-parsley-focus="..." 和 data-parsley-no-focus，但这对我没有任何作用。我也查看了源代码，我发现 validate.focusedField.focus() 是什么迫使焦点回到错误的领域，但无法完全弄清楚如何阻止它。

那么，有没有办法覆盖这种行为？

Answer 1

以下代码按预期工作，但您可能需要根据您的代码调整某些方面。

我做了什么：

每当一个字段有错误时，检查它是否是一个特定的字段（在我的例子中是 field1），如果是，就做一些事情（在这种情况下，关注 field2 输入).
将 data-parsley-focus="none" 添加到表单以避免自动聚焦到第一个有错误的输入（默认行为）。

$(document).ready(function() {
  $.listen('parsley:field:error', function(parsleyField) {
    if (parsleyField.$element.attr('name') === 'field1') {
      $("input[name=field2]").focus();
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/parsley.js/2.0.7/parsley.min.js"></script>
<form id="myForm" data-parsley-validate data-parsley-focus="none">
  <input type="text" name="field1" required data-parsley-minlength="50" data-parsley-trigger="focusout" />
  <input type="text" name="field2" required />
  <input type="submit" />
</form>

如果您运行遇到麻烦，请提供 fiddle 并将相关代码添加到您的问题中。

如何覆盖 Parsley JS 焦点行为

How to override Parsley JS focus behavior

javascript

jquery

parsley.js