表单初始化和字段初始化事件在 parsley.js 中不起作用

Posted 2023-05-09

【中文标题】表单初始化和字段初始化事件在 parsley.js 中不起作用

【英文标题】：Form init and field init events do not work in parsley.js

【发布时间】：2016-11-09 11:57:57

【问题描述】：

这是一个简单的例子：http://codepen.io/spacejaguar/pen/KrvqNW

html:

<form data-parsley-validate>
  <label for="name">Name:</label>
  <input type="text" name="name" required>
  <br>
  <input type="submit" value="validate">

  <p><small>This is a simplistic example, good to start from when giving examples of use of Parsley</small></p>
</form>

和JS

$(function () 
    $('form').parsley()
    .on('form:init', function() 
        console.log('Form init', arguments);
    )
    .on('field:init', function() 
        console.log('Field init', arguments);
    )
    .on('form:validate', function() 
        console.log('Form validate', arguments);
    )
    .on('form:submit', function() 
        return false; // Don't submit form for this demo
    );
);

似乎根本没有调用 form:init 或 field:init 回调函数，而其他任何一个都可以正常工作。我做错了什么？或者可能是一个错误？

[编辑] 我查看了源代码并做了一些调试工作，似乎在附加任何侦听器之前触发了 init 事件。创建 parsley 实例看起来很像：

$.fn.parsley 被调用 -- 创建新的 ParsleyFactory，调用 init fn --- ParsleyFactory.prototype.init 验证配置等并调用 bind fn ---- ParsleyFactory.prototype.bind 决定创建哪个构造函数（ParsleyForm、ParsleyField 或 ParsleyMultiple） ----- new ParsleyForm 被调用并返回实例 ---- ParsleyFactory.prototype.bind

触发初始化事件

并返回实例 --- ParsleyFactory.prototype.init 返回实例 -- ParsleyFactory 构造函数返回实例 $.fn.parsley 返回实例

.on('field:init', function() ... ) 被绑定

【问题讨论】：

有趣。所以$.Parsley.on('form:init') 会起作用，但这是捕捉事件的唯一方法。最好在初始化之后触发事件（比如使用setTimeout）。想写 PR 吗？

近期恐怕做不到，但我稍后再试一下。

【参考方案1】：

我遇到了同样的问题，感谢您对事件触发的研究，我找到了解决方案。只需将事件处理程序绑定到window.Parsley 对象，它就可以正常工作。

例如：

window.Parsley.on('form:init', () => console.log('form:init'))

【讨论】：

是的，它以某种方式解决了这个问题，但请记住，这样你就可以全局绑定form:init，它会为每个欧芹实例调用。

确实如此。在这种情况下，我只有一个表格。老实说，欧芹中的事件绑定/事件发射对我来说并不是很清楚。