如何使用Parsley验证通过Htmx动态插入的表单？

Parsley.js默认仅在页面初始加载时自动初始化DOM中已存在的表单，通过Htmx动态插入的表单不在初始DOM树里，所以需要手动触发Parsley初始化，结合Htmx的事件即可实现：

实现步骤 #

1. 监听Htmx的htmx:afterSwap事件：该事件会在Htmx成功将内容插入/交换到页面后触发，确保表单已完全加载到DOM中。
2. 在事件回调中定位到动态插入的表单，调用parsley()方法初始化验证。

代码示例 #

动态表单（保持原有结构） #

<form method="post" data-parsley-validate>
    ...
    <div> 
        <label for="price">Price<span class="asteriskField">*</span></label> 
        <input type="number" name="price" value="0.0" data-parsley-required="true" data-parsley-required-message="'Price' is required" data-parsley-type="number" class="numberinput form-control" required="" id="price"> 
    </div>
    ...
</form>

初始化脚本 #

// 监听Htmx内容交换完成事件
document.addEventListener('htmx:afterSwap', function(event) {
  // 从交换的目标元素中找到动态表单
  const dynamicForm = event.detail.target.querySelector('form[data-parsley-validate]');
  
  if (dynamicForm) {
    // 先销毁可能存在的旧Parsley实例（避免重复绑定）
    if (dynamicForm.Parsley) {
      dynamicForm.Parsley.destroy();
    }
    // 初始化新表单的Parsley验证
    dynamicForm.parsley();
  }
});

额外说明 #

• 如果你的动态表单是通过hx-trigger的特定事件插入，也可以在Htmx的请求完成回调中直接初始化，但htmx:afterSwap是全局通用的方案，适合所有动态插入场景。
• 确保Parsley.js的脚本在初始化代码之前加载，否则会出现parsley()方法未定义的错误。

内容的提问来源于stack exchange，提问作者Moses Machua