Show a form field error message

[roland-d]

Hello,

Today I have been playing around with Formie and most of it works very well but there is 1 thing I am stuck with. Let me explain.

I created a text field on the form in which the user enters a code. Next the user clicks on the Next (validate code) button to go to the next page. This click is picked up by my JS code that is listening to the onFormieValidate trigger like this $form.addEventListener('onFormieValidate'. Works all well, then my code does an AJAX call to the server to check the code. The result that comes back from this is processed and eventually results in this block of code:

if (!data.exists) {
   submitHandler.formSubmitError();
} else {
   submitHandler.submitForm();
}

The result is that the form is not submitted and the general error is shown.

All great but what I am missing is the validation error text on the field itself. See this field for example that is on another page and shows the error message below the input field:

How do I tell/trigger Formie to also show the error message on my field?

[engram-design]

It's a bit of a pain with bouncer.js in that you need to register your own custom validator so that it knows about it ahead of time. It's a little more work, but it's not too difficult and is a little more robust.

const $form = document.querySelector('.fui-form');

$form.addEventListener('registerFormieValidation', function(e) {
    const customRule = {
        myCustomRule(field) {
            // Only apply this rule for the field we want to target.
            // Could be using a data-attribute, CSS selector, whatever you need
            if (field.getAttribute('name') != 'fields[emailAddress]') {
                return;
            }

            // Add your logic here, return `true` when there is an error to flag
            return true;
        },
    };

    const customMessage = {
        myCustomRule(field) {
            return 'Sorry, this is incorrect.';
        },
    };

    // Add our custom rules
    e.detail.validatorSettings.customValidations = {
        ...e.detail.validatorSettings.customValidations,
        ...customRule,
    };

    // Add our custom messages
    e.detail.validatorSettings.messages = {
        ...e.detail.validatorSettings.messages,
        ...customMessage,
    };
});

We do something very similar for some fields, where they have additional validation logic like a File Upload field.

[roland-d]

Thank you @engram-design for your example code. This really helps a lot. I understand now how it is supposed to work. Let's see how to incorporate but have good faith :)

[roland-d]

Just a short follow-up on this, this works as expected...except when you need to do an AJAX call to validate against a database value. The rule that is triggered continues while the fetch is running. I suspect the calling function is not a promise waiting for a return value. My workaround is to run my fetch in the onBeforeFormieSubmit.

[engram-design]

Hmmm, client-side validation should be running regardless, which fires off these rules. But if you disable client-side validation and use only server-side validation, then you'll need to define these validation rules in PHP.