Option to toggle validation on page change?

[uandco]

Hi,

Currently, validation only happens when using the next/previous/submit buttons of each form page. Navigating to another page doesn't trigger any validation of the current page fields.

This can be confusing for users to get a "please fill the required fields" on page 3, after they submit, if they forgot they jumped from page 1 to 3, without validating 1 or even seeing 2.

I reckon there should be an option to enable validation on navigation, to make sure the error message is always in context.

Thanks

[engram-design]

This is the distinction between navigating and submitting and is valid, correctly behaviour.

In fact, when the user clicks a tab to another page in a multi-page form, the values of that page are not submitted. I'd argue that changing this behaviour of clicking a tab to navigate to another page to submit (and validate) is confusing to a user. That's just not a standard form submission action that the user would expect.

It's why a final validation on the last page of the form is so important. In case users miss an error on a previous page (which under normal circumstances shouldn't be possible), it's clear that they need to go back to fix errors. In addition, we also highlight which tab has the error, so it's pretty straightforward for users to realise that there's an error on a previous page.

So this won't really be possible unless we only add client-side validation when clicking on a page tab. That's maybe something we can look at adding. But I'm not interested in adding a server-side validation check when you click on a tab to navigate to another page. First and foremost, we're not sending the data of the form to the server anyway.

Hope that makes sense? Let me know if I've misunderstood anything.

[uandco]

Thanks for your reply @engram-design

I must be missing something then. What do you mean by "we highlight which tab has an error"?

I can't see any class being added to the tabs, and clicking the tabs after submitting (with errors) doesn't display the inline errors either once viewing the page where validation errors occurred. So even if the tab was marked as containing errors, the user would still be confused about what field caused it exactly.

I don't use a custom template, I only disabled the "Output Theme" option.

I tried both the page reload and ajax submission methods and they both produce the same result.

[engram-design]

Hmm, yes there might be something else going on, which also probably explains your confusion. Here's a quick example of a 3-page form where I've skipped to the end to submit the form without filling in the required field on the second page.

Formie will skip automatically to the first page with an error, along with showing the tab with the error and the inline error for the field. I'm guessing you're not seeing that?

If you can comment what Formie version you're using, and if you have the Formie JS disabled? Anything else to mention that isn't the default?

[uandco]

Both JS options Output Base JavaScript and Output Theme are enabled.

Plugin version is 2.0.21

[engram-design]

So what happens on your end when you replicate my scenario (submitting the form on the last page)? Does the page just reload on the last page? Can you maybe test out a reduced test case with all the defaults in place, no overrides or custom templates, and just a craft.formie.renderForm() call?

[uandco]

Yes, just reloads the last page and display the error message there. indeed called from the page via {{ craft.formie.renderForm(form) }} (form comes from a Matrix field)

[uandco]

I tried to export the form so you can reproduce it, but I noticed the fields are not exported? Here's the JSON I get when exporting

[
    {
        "handle": "quote",
        "oldHandle": null,
        "fieldContentTable": "{{%fmc_quote}}",
        "templateId": 1,
        "submitActionEntryId": null,
        "submitActionEntrySiteId": null,
        "defaultStatusId": 1,
        "dataRetention": "forever",
        "dataRetentionValue": null,
        "userDeletedAction": "retain",
        "fileUploadsAction": "retain",
        "fieldLayoutId": 31,
        "settings": {
            "displayFormTitle": false,
            "displayCurrentPageTitle": true,
            "displayPageTabs": true,
            "displayPageProgress": false,
            "scrollToTop": true,
            "progressPosition": "start",
            "defaultLabelPosition": "verbb\\formie\\positions\\AboveInput",
            "defaultInstructionsPosition": "verbb\\formie\\positions\\BelowInput",
            "submitMethod": "ajax",
            "submitAction": "message",
            "submitActionTab": null,
            "submitActionUrl": null,
            "submitActionFormHide": true,
            "submitActionMessage": "[{\"type\":\"paragraph\",\"attrs\":{\"textAlign\":\"start\"},\"content\":[{\"type\":\"text\",\"text\":\"Thank you for contacting us, we will send you a quote as soon as possible.\"}]},{\"type\":\"paragraph\",\"attrs\":{\"textAlign\":\"start\"},\"content\":[{\"type\":\"text\",\"text\":\"The reference of your submission is \"},{\"type\":\"variableTag\",\"attrs\":{\"label\":\"Submission ID\",\"value\":\"{submissionId}\"},\"marks\":[{\"type\":\"bold\"}]},{\"type\":\"text\",\"text\":\".\"}]}]",
            "submitActionMessageTimeout": null,
            "submitActionMessagePosition": "top-form",
            "loadingIndicator": "text",
            "loadingIndicatorText": "Loading",
            "validationOnSubmit": true,
            "validationOnFocus": false,
            "errorMessage": "[{\"type\":\"paragraph\",\"attrs\":{\"textAlign\":\"start\"},\"content\":[{\"type\":\"text\",\"text\":\"Please fix the errors below.\"}]}]",
            "errorMessagePosition": "top-form",
            "requireUser": false,
            "requireUserMessage": "[{\"type\":\"paragraph\",\"attrs\":{\"textAlign\":\"start\"}}]",
            "scheduleForm": false,
            "scheduleFormStart": null,
            "scheduleFormEnd": null,
            "scheduleFormPendingMessage": "[{\"type\":\"paragraph\",\"attrs\":{\"textAlign\":\"start\"}}]",
            "scheduleFormExpiredMessage": "[{\"type\":\"paragraph\",\"attrs\":{\"textAlign\":\"start\"}}]",
            "limitSubmissions": false,
            "limitSubmissionsNumber": null,
            "limitSubmissionsType": "total",
            "limitSubmissionsMessage": "[{\"type\":\"paragraph\",\"attrs\":{\"textAlign\":\"start\"}}]",
            "integrations": {
                "recaptcha": {
                    "enabled": "1",
                    "showAllPages": ""
                },
                "hcaptcha": {
                    "enabled": "1",
                    "showAllPages": ""
                },
                "duplicate": {
                    "enabled": "1",
                    "showAllPages": ""
                },
                "honeypot": {
                    "enabled": "1",
                    "showAllPages": ""
                },
                "javascript": {
                    "enabled": "1",
                    "showAllPages": ""
                }
            },
            "submissionTitleFormat": "{timestamp}",
            "collectIp": false,
            "collectUser": false,
            "dataRetention": null,
            "dataRetentionValue": null,
            "fileUploadsAction": null,
            "redirectUrl": null,
            "defaultEmailTemplateId": null,
            "disableCaptchas": false
        },
        "resetClasses": false,
        "id": 1029,
        "tempId": null,
        "draftId": null,
        "revisionId": null,
        "isProvisionalDraft": false,
        "uid": "ef7c4042-266e-4c95-ab2b-20a499160878",
        "siteSettingsId": 1029,
        "contentId": 294,
        "enabled": true,
        "archived": false,
        "siteId": 1,
        "title": "Obtain a quote",
        "slug": null,
        "uri": null,
        "dateCreated": "2022-11-18T11:58:16+10:00",
        "dateUpdated": "2023-02-07T11:21:31+10:00",
        "dateLastMerged": null,
        "dateDeleted": null,
        "trashed": false,
        "isNewForSite": false,
        "canonicalId": 1029,
        "isDraft": false,
        "isRevision": false,
        "isUnpublishedDraft": false,
        "ref": null,
        "status": "enabled",
        "structureId": null,
        "url": null
    }
]

[uandco]

In saying that, with the AJAX method, resubmitting the form without filling the required fields then displays a generic error message for all the required fields:

<div class="fui-error-message" data-error-message="" id="fui-error-fields[yourDetails][rows][new1][fields][contactPerson]">Please fill out this field.</div>

Same for Page Reload, on top of not using the same markup, the error messages are different between submit from page 3 and normal validation using "next" on page 1.

In some cases, I can even end up with this (submit from page 3, then click next on page 1):

[engram-design]

The inconsistent markup is a semi-known issue, and it's down to the two different submission methods. The latter method (in the <ul> element) is technically the correct one. This is in case we want to show multiple errors on a field. I'll take a look at consolidating that, just want to be careful about changing it in a point release.

As for the double error message, not sure how you're getting that? Submitting on page 3 will redirect me to page 1, where the error is shown, and clicking next on page 1 hides the messages, performs an ajax submit, then shows the same error messages. Unless you're mixing in client-side validation too?

[uandco]

I think there's 3 different issues here, let me split them into clear separate reports.

Issue 1 - Error text is different

• When clicking "next" on page 1, I get "Please fill out this field." on required fields
• When skipping to last page and submitting, I go back to page 1 and the error message on required fields is "[field name] cannot be blank."

This happens both for AJAX and Page Reload methods.

Issue 2 - markup is different

When using the Page Reload method, the error markup is different:

• Click "Next on page 1", you get <div class="fui-error-message" data-error-message="" id="fui-error-fields[testGroup][rows][new1][fields][required1]">Please fill out this field.</div>
• Skip to last page, submit, you get <ul class="fui-errors"><li class="fui-error-message">Required 1 cannot be blank.</li></ul>

I think it is somehow linked to issue 1 tho. The detailed "[field name] cannot be blank" error uses the list markup, whereas the generic "Please fill out this field" error uses the single error markup.

Please also note the list markup breaks accessibility as the input loses its aria-describedby attribute.

Issue 3 - markup is doubled

• Set the form method the Page Reload
• Skip to page 2, submit
• See "list markup" errors on fields
• Click "next"
• List markup errors remain AND "Please fill out this field" is added as my screenshot showed

This doesn't happen with AJAX method.

[engram-design]

Thanks for the summary:

Issue 1
That only seems to be when client-side validation ("Validate Form on Submit") is also in the mix. Is this correct? That's the only way I can replicate that. If so, that's one of the main reasons we're switching from bouncer for client-side validation, so we've got more control and can provide better consistency.

Issue 2
Valid, and we'll look at consolidating those markups. Good call on the aria-describedby although that's going to need to be revised anyway. This again comes from the client-side JS validation. The trick here is that if provided, instructions for the field are used for aria-describedby, and if an error occurs, it's switched to the error. We'll have to look into that when we get to it

Issue 3
I can't replicate this, even with client-side validation enabled - which actually prevent the server-side ones from showing, as they're shown first. Errors are only ever server-side-rendered (you can tell with the <ul> errors), and the "Please fill out this field" errors only come from client-side validation.

[uandco]

Issue 1 only happening with "Validate form on submit" -> correct
Issue 3: you need to have both server side method and validate form on submit active to reproduce. I can reproduce it every time. Here's the export of a simpler form to test:

{
    "handle": "test",
    "settings": "{\"displayFormTitle\":false,\"displayCurrentPageTitle\":true,\"displayPageTabs\":true,\"displayPageProgress\":false,\"scrollToTop\":true,\"progressPosition\":\"end\",\"defaultLabelPosition\":\"verbb\\\\formie\\\\positions\\\\AboveInput\",\"defaultInstructionsPosition\":\"verbb\\\\formie\\\\positions\\\\AboveInput\",\"submitMethod\":\"page-reload\",\"submitAction\":\"message\",\"submitActionTab\":null,\"submitActionUrl\":null,\"submitActionFormHide\":true,\"submitActionMessage\":\"[{\\\"type\\\":\\\"paragraph\\\",\\\"attrs\\\":{\\\"textAlign\\\":\\\"start\\\"},\\\"content\\\":[{\\\"type\\\":\\\"text\\\",\\\"text\\\":\\\"Submission saved.\\\"}]}]\",\"submitActionMessageTimeout\":null,\"submitActionMessagePosition\":\"top-form\",\"loadingIndicator\":\"text\",\"loadingIndicatorText\":\"Loading\",\"validationOnSubmit\":true,\"validationOnFocus\":false,\"errorMessage\":\"[{\\\"type\\\":\\\"paragraph\\\",\\\"attrs\\\":{\\\"textAlign\\\":\\\"start\\\"},\\\"content\\\":[{\\\"type\\\":\\\"text\\\",\\\"text\\\":\\\"Couldn\u2019t save submission due to errors.\\\"}]}]\",\"errorMessagePosition\":\"top-form\",\"requireUser\":false,\"requireUserMessage\":\"[{\\\"type\\\":\\\"paragraph\\\",\\\"attrs\\\":{\\\"textAlign\\\":\\\"start\\\"}}]\",\"scheduleForm\":false,\"scheduleFormStart\":null,\"scheduleFormEnd\":null,\"scheduleFormPendingMessage\":\"[{\\\"type\\\":\\\"paragraph\\\",\\\"attrs\\\":{\\\"textAlign\\\":\\\"start\\\"}}]\",\"scheduleFormExpiredMessage\":\"[{\\\"type\\\":\\\"paragraph\\\",\\\"attrs\\\":{\\\"textAlign\\\":\\\"start\\\"}}]\",\"limitSubmissions\":false,\"limitSubmissionsNumber\":null,\"limitSubmissionsType\":\"total\",\"limitSubmissionsMessage\":\"[{\\\"type\\\":\\\"paragraph\\\",\\\"attrs\\\":{\\\"textAlign\\\":\\\"start\\\"}}]\",\"integrations\":{\"recaptcha\":{\"enabled\":\"1\",\"showAllPages\":\"\"},\"duplicate\":{\"enabled\":\"1\",\"showAllPages\":\"\"},\"honeypot\":{\"enabled\":\"1\",\"showAllPages\":\"\"},\"javascript\":{\"enabled\":\"1\",\"showAllPages\":\"\"}},\"submissionTitleFormat\":\"{timestamp}\",\"collectIp\":false,\"collectUser\":false,\"dataRetention\":null,\"dataRetentionValue\":null,\"fileUploadsAction\":null,\"redirectUrl\":null,\"defaultEmailTemplateId\":null,\"disableCaptchas\":false}",
    "submitActionEntryId": null,
    "submitActionEntrySiteId": null,
    "defaultStatusId": 1,
    "dataRetention": "forever",
    "dataRetentionValue": null,
    "userDeletedAction": "retain",
    "fileUploadsAction": "retain",
    "fieldLayoutId": 54,
    "title": "Test",
    "formTemplate": {
        "name": "UU",
        "handle": "uu",
        "template": "",
        "useCustomTemplates": 0,
        "outputCssLayout": 1,
        "outputCssTheme": 0,
        "outputJsBase": 1,
        "outputJsTheme": 1,
        "outputCssLocation": "page-header",
        "outputJsLocation": "page-footer",
        "sortOrder": null
    },
    "notifications": [],
    "pages": [
        {
            "settings": {
                "submitButtonLabel": "Next",
                "backButtonLabel": "Back",
                "showBackButton": false,
                "saveButtonLabel": "Save",
                "showSaveButton": false,
                "saveButtonStyle": "link",
                "buttonsPosition": "right",
                "cssClasses": null,
                "containerAttributes": null,
                "inputAttributes": null,
                "enableNextButtonConditions": false,
                "nextButtonConditions": [],
                "enablePageConditions": false,
                "pageConditions": [],
                "enableJsEvents": false,
                "jsGtmEventOptions": []
            },
            "userCondition": null,
            "elementCondition": null,
            "label": "Page 1",
            "rows": [
                {
                    "fields": [
                        {
                            "label": "Test group",
                            "handle": "testGroup",
                            "type": "verbb\\formie\\fields\\formfields\\Group",
                            "settings": {
                                "instructions": null,
                                "required": false,
                                "contentTable": "{{%fmc_6252_testgroup}}",
                                "matchField": null,
                                "placeholder": null,
                                "defaultValue": null,
                                "prePopulate": null,
                                "errorMessage": null,
                                "labelPosition": null,
                                "instructionsPosition": null,
                                "cssClasses": null,
                                "containerAttributes": null,
                                "inputAttributes": null,
                                "includeInEmail": true,
                                "enableConditions": false,
                                "conditions": null,
                                "enableContentEncryption": false,
                                "visibility": null,
                                "isNested": false
                            },
                            "rows": [
                                {
                                    "fields": [
                                        {
                                            "label": "Required 1",
                                            "handle": "required1",
                                            "type": "verbb\\formie\\fields\\formfields\\SingleLineText",
                                            "settings": {
                                                "instructions": null,
                                                "required": true,
                                                "limit": false,
                                                "min": null,
                                                "minType": "characters",
                                                "max": null,
                                                "maxType": "characters",
                                                "matchField": null,
                                                "placeholder": null,
                                                "defaultValue": null,
                                                "prePopulate": null,
                                                "errorMessage": null,
                                                "labelPosition": null,
                                                "instructionsPosition": null,
                                                "cssClasses": null,
                                                "containerAttributes": null,
                                                "inputAttributes": null,
                                                "includeInEmail": true,
                                                "enableConditions": false,
                                                "conditions": null,
                                                "enableContentEncryption": false,
                                                "visibility": null,
                                                "isNested": true
                                            }
                                        }
                                    ]
                                }
                            ]
                        }
                    ]
                },
                {
                    "fields": [
                        {
                            "label": "Required, not in a group",
                            "handle": "requiredNotInAGroup",
                            "type": "verbb\\formie\\fields\\formfields\\SingleLineText",
                            "settings": {
                                "instructions": null,
                                "required": true,
                                "limit": false,
                                "min": null,
                                "minType": "characters",
                                "max": null,
                                "maxType": "characters",
                                "matchField": null,
                                "placeholder": null,
                                "defaultValue": null,
                                "prePopulate": null,
                                "errorMessage": null,
                                "labelPosition": null,
                                "instructionsPosition": null,
                                "cssClasses": null,
                                "containerAttributes": null,
                                "inputAttributes": null,
                                "includeInEmail": true,
                                "enableConditions": false,
                                "conditions": null,
                                "enableContentEncryption": false,
                                "visibility": null,
                                "isNested": false
                            }
                        }
                    ]
                }
            ]
        },
        {
            "settings": {
                "submitButtonLabel": "Submit",
                "backButtonLabel": "Back",
                "showBackButton": true,
                "saveButtonLabel": "Save",
                "showSaveButton": false,
                "saveButtonStyle": "link",
                "buttonsPosition": "left",
                "cssClasses": null,
                "containerAttributes": null,
                "inputAttributes": null,
                "enableNextButtonConditions": false,
                "nextButtonConditions": [],
                "enablePageConditions": false,
                "pageConditions": [],
                "enableJsEvents": false,
                "jsGtmEventOptions": []
            },
            "userCondition": null,
            "elementCondition": null,
            "label": "Page 2",
            "rows": [
                {
                    "fields": [
                        {
                            "label": "Optional",
                            "handle": "optional",
                            "type": "verbb\\formie\\fields\\formfields\\SingleLineText",
                            "settings": {
                                "instructions": null,
                                "required": false,
                                "limit": false,
                                "min": null,
                                "minType": "characters",
                                "max": null,
                                "maxType": "characters",
                                "matchField": null,
                                "placeholder": null,
                                "defaultValue": null,
                                "prePopulate": null,
                                "errorMessage": null,
                                "labelPosition": null,
                                "instructionsPosition": null,
                                "cssClasses": null,
                                "containerAttributes": null,
                                "inputAttributes": null,
                                "includeInEmail": true,
                                "enableConditions": false,
                                "conditions": null,
                                "enableContentEncryption": false,
                                "visibility": null,
                                "isNested": false
                            }
                        }
                    ]
                }
            ]
        }
    ]
}