如何使用 Parsley 验证动态 Htmx 表单？

Question

我有一个使用

parsleyjs

进行验证的表单，效果很好。

Htmx

根据用户单击事件将相同的表单注入到不同的页面，其中验证在表单提交时无法触发。看来 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>

Answer 1

已解决！

深入研究 Parsley 文档后，我发现有一个 内置方法，称为刷新（），它将新表单或添加的表单元素绑定到 parsley。

然后监听 htmx:afterSwap 事件，该事件在内容交换到 DOM 中时触发，并调用

refresh()

<script type="text/javascript">
    document.body.addEventListener('htmx:afterSwap', function(evt) {
        //reinitialize parsley form validation
        $('form[data-parsley-validate]').each(function() {
            $(this).parsley().refresh();
        });     
    });
</script>