javascript - 如何覆盖 Parsley JS 焦点行为

Question

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

1. 显示错误信息。
2. 显示箭头。
3. 然后移动焦点(光标)到密码字段。

使用 jQuery，我能够将焦点移动到 password 字段，但几毫秒后，焦点被拉回到 email 字段错误信息。

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

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

Answer 1

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

我做了什么:

1. 每当一个字段有错误时，检查它是否是一个特定的字段(在我的例子中是 field1)，如果是，则做一些事情(在这种情况下，关注 field2 输入)。
2. 添加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 并将相关代码添加到您的问题中。