parsley.jshtmx

How do you validate dynamic Htmx form with Parsley?


I have a form that uses parsleyjs for validation and it works well. The same form is injected by Htmx into a different page based on a user click event where the validation fails to fire on form submit. It appears Parsley is not aware of dynamically inserted form or form elements. How do you tell Parsley to bind to the new form? Below is a sample of my form

<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>

Solution

  • SOLVED!

    After digging through Parsley docs, I found that there's a built-in method called refresh() that binds the new form or added form elements to parsley.

    Then listen to htmx:afterSwap event that's fired when content is swapped into the DOM and call 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>