Formit validation skipped when used with HTMX

[Airiam]

Summary

I have a simple sign up form in a modal window. The Formit call works if it is on a standalone resource, but I want the modal to display a success message when the form is submitted or show validation errors without having to reload the page (which closes the modal).
I looked for an easy AJAX solution, which I found in HTMX, the form submits and displays the relevant success message. However the FormIt validation is completely ignored and the errors not shown.

Is it possible to still use HTMX and get it to use the FormIt Validation?

I came across the SepiaRiver article MODX Forms via AJAX, but both it and the GitHub link in the article presume too much knowledge on the part of the reader and I can’t work out how to use it, or even if it would help me with a solution.

The call that I am using to Formit and the form looks like this:

[[!FormIt?
    &form=`sign-up-form`
    &hooks=`spam,FormItSaveForm,sendgrid-add-contact`
    &formName=`New Contact`
    &successMessage=`You're Awesome`
    &validationErrorMessage=`Oops!`
    &validate=`nospam:blank,
        preferred-name:regexp=^/^[a-zA-Z -]*$/^:required,
        first-name:regexp=^/^[a-zA-Z -]*$/^:required,
        last-name:regexp=^/^[a-zA-Z -]*$/^:required,
        email:email:required`
]]



<form id="sign-up" hx-post="[[~[[*id]]]]" hx-target="#sign-up" hx-select="#sign-up" class="form mulish-light" enctype="multipart/form-data">
    
    [[+fi.success:is=`1`:then=`
    <div class="form-notification success-main">
        <span class="form-notification-title caveat-brush-regular">[[+fi.successMessage]]</span>
        <span class="form-notification-body">Thanks for joining. Quick, your email needs some "you-time". Your freebie awaits!</span>
    </div>
    `]]
    [[+fi.validation_error:is=`1`:then=`
    <div class="form-notification error-main">
        <span class="form-notification-title caveat-brush-regular">[[+fi.validation_error_message]]</span>
        <span class="form-notification-body">Something's not right! Check over your details again so we can get you signed up as quickly as the brown fox jumps over the lazy dog!</span>
    </div>
    `]]
    
    [[+fi.success:is=`1`:then=`
    `:else`
    <input type="hidden" name="nospam:blank" value="[[+fi.nospam]]" />
    
    <section id="form-body">
        
        <p [[!+fi.error.preferred-name:notempty=`class="has-error"`]]>
            <label>
                <span>Preferred Name:</span>
                [[!+fi.error.preferred-name:notempty=`<span class="error">Hmmm, just letters please.</span>`]]
                <input type="text" class="mulish-light" name="preferred-name" id="preferred-name" value="[[!+fi.preferred-name]]" placeholder="Your preferred name" autofocus required />
                <!--<span class="input-error" data-error="preferred-name">[[+fi.error.preferred-name]]</span>-->
                    
            </label>
        </p>
        
        <p [[!+fi.error.first-name:notempty=`class="has-error"`]]>
            <label>
                <span>First Name:</span>
                [[!+fi.error.first-name:notempty=`<span class="error">Letters and letters only please.</span>`]]
                <input type="text" class="mulish-light" name="first-name" id="first-name" value="[[!+fi.first-name]]" placeholder="Your first name" autofocus required />
                <!--<span class="input-error" data-error="first-name">[[+fi.error.first-name]]</span>-->
            </label>
        </p>
            
        <p[[!+fi.error.last-name:notempty=`class="has-error"`]]>
            <label>
                <span>Last Name:</span>
                [[!+fi.error.last-name:notempty=`<span class="error">Do you have punctuation in your name? I didn't think so.</span>`]]
                <input type="text" class="mulish-light" name="last-name" id="last-name" value="[[!+fi.last-name]]" placeholder="Your last name" required />
                <!--<span class="input-error" data-error="last-name">[[+fi.error.last-name]]</span>-->
            </label>
        </p>
          
        <p[[!+fi.error.email:notempty=`class="has-error"`]]>
            <label>
                <span>E-mail:</span>
                [[!+fi.error.email:notempty=`<span class="error">Well, this doesn't look like an email address. Best check it.</span>`]]
                <input type="email" class="mulish-light" name="email" id="email" placeholder="someone@something.com" value="[[!+fi.email]]" required />
                <!--<span class="input-error" data-error="email">[[+fi.error.email]]</span>-->
            </label>
        </p>
          
    </section>
      
    <input type="submit" class ="lb-button-yellow caveat-brush-regular" name="submit" id="submit" value="Join now"/>
    `]]
</form>

Any help would be greatly appreciated, as otherwise I feel like I will need to revert to having a link in the modal to a separate resource in order to process the form.

[halftrainedharry]

@Airiam

However the FormIt validation is completely ignored and the errors not shown.

I tested your form with HTMX on a resource and the validation seems to work fine. Maybe there is some issue in relation with the modal window you’re using?

---

As an alternative you could try the extra FetchIt.
It’s a wrapper for FormIt to use it with AJAX and returns JSON (as opposed to HTMX).

[Airiam]

Hmmm, that’s interesting, when I test the code on a standalone resource is skips the validation, which would suggest it’s neither the modal or the code, but something else. Could my server be causing the issue and blocking the validation?

I’ll look into FetchIt and see if it behaves any differently.

[halftrainedharry]

So does the validation work when you use FormIt without HTMX?
What versions of MODX, PHP and FormIt are you using?

If FormIt is the problem, then FetchIt will have the same issue as it is just a wrapper for FormIt.

[Airiam]

Good point. I just tried it without HTMX and it’s skipping the validation still. I’m on MODX 3.0.4, FormIt 5.0.1 and PHP 7.4

[halftrainedharry]

I believe the problem is not that the validators don’t run.
The problem seems to be the use of the caret (^) in the regexp validator.

regexp=^/^[a-zA-Z -]*$/^

Because the same character (^) is used as a separator, ^ gets removed from the regular expression as well.

Instead of ^[a-zA-Z -]*$, the code checks for [a-zA-Z -]*$ (which is always true).

[Airiam]

So, I took the regular expression and put it into a snippet and used it as a custom validator and it still skips. This is on the standalone resource.

It is behaving like the validation is being ignored.

I’m pretty sure that I had the validation working at some point as I was using the failed state to tweak my CSS for the error messages. So it must be something that I have done, but I can’t work out what exactly. I’ve also removed my custom hook from the FormIt call and it makes no difference.

I’ve also taken the same code to a different website on a completely different host and the same thing happens.

[Airiam]

Ah, spoke too soon, I’d managed to add an ‘e’ into customValidators, with that removed the validation works.

[Airiam]

It also works with the HTMX.

For anyone finding this issue themselves with the regex validators I used a modified version of Bob Ray’s snippet in this post:

https://forums.modx.com/thread/96945/help-with-regexp-validator