search

verbb / formie

The most user-friendly forms plugin for Craft CMS.
Other
94 stars 72 forks source link

Missing general error alert when error on File Upload field #925

Closed romainpoirier closed 2 years ago

romainpoirier commented 2 years ago

Description On a multi-pages form with required fields, the general error alert isn't displayed on top of the form if the error come from a (required) File Upload field.

On the other side, the context error displayed under the field is still showing, which is expected. Trying to get an error from another type of field generates this error as expected.

Please refer to the screencast sent to your support email address.

Form settings

Additional info

engram-design commented 2 years ago

Thanks for the video! Although I can't seem to replicate that. This is with client-side validation enabled

image

And I've tried all manner of combinations (similar to your video). As soon as client-side validation kicks in, if there's an error, it'll display a global error message, so it's incredibly strange that it doesn't for some fields, as those code to do this is quite basic.

Do you have any captchas enabled that might disrupt the validation flow?

However reviewing your video again, it looks like client-side validation is occurring but the page is still reloading. I believe we've come across this issue before with your site, and never got to the bottom of it, and I even went so far as downloading your site and was unable to replicate it. That could very well be the cause of the issue, but not quite sure where to start debugging it. Does your site use any JS framework like Vue or React that might interfere with Formie's JS?

romainpoirier commented 2 years ago

Do you have any captchas enabled that might disrupt the validation flow?

No, I don't have. I use the native renderForm() without any additional script. And I don't have any captcha on the others parts of this website.

it looks like client-side validation is occurring but the page is still reloading

Yes, and as you can see this do not prevent the submit in this case with empty required file inputs.

Does your site use any JS framework like Vue or React that might interfere with Formie's JS?

No, I just use jQuery for this one. There's not so much JS on this website.

engram-design commented 2 years ago

Looks like the root of the cause must be the behaviour of validation not preventing form submission, but that seems impossible with Formie's JS. Is it possible to disable all JS on your site, use default Formie templates and try again to see if this is still the case?

romainpoirier commented 2 years ago

I have disabled all JS on my site, and I get the same result: the submit is not blocked by on-field error before the page reload. I've sent you another screencast by email, you can see only the Formie JS scripts are loaded in the resources panel. I've also checked the source code: I have no other <script> tag than those injected by Formie.

engram-design commented 2 years ago

Thanks for the updated video, that all does seem to be correct. I've actually put together an example that prints out console.log statements on the form submit event listener to try to figure out what point in the process is not being prevented from submission. If you're able to install this and give it a go, that might provide some insight. Just report back the debug statements you see (you might want to stop the page from reloading once you hit submit before copying the debug statements).

Change your verbb/formie requirement in composer.json to:

"require": {
  "verbb/formie": "dev-submit-testing as 1.5.19",
  "...": "..."
}

Then run composer update.

romainpoirier commented 2 years ago

Thank you, this is what I get between the click on the button and before the page reload:

submit
formie.js?v=1654692240:1 beforeSubmitEvent
formie.js?v=1654692240:1 beforeSubmitEventAfter
formie.js?v=1654692240:1 beforeSubmitEventAfterDispatch
formie.js?v=1654692240:1 beforeValidate
formie.js?v=1654692240:1 beforeFormieCaptchaValidate
formie.js?v=1654692240:1 afterFormieCaptchaValidate
formie.js?v=1654692240:1 afterFormieCaptchaValidateDispatch
formie.js?v=1654692240:1 submitForm
formie.js?v=1654692240:1 submitFormBefore
formie.js?v=1654692240:1 submitFormAfter
formie.js?v=1654692240:1 submitFormFail

Please note that on page load I get this warning (which seems get from a datepicker field on a previous page):

The specified value "2022-10-08 00:00:00" does not conform to the required format, "yyyy-MM-dd".
143812-ut-aliqua-est-sed-l:340 The specified value "2022-03-17 00:00:00" does not conform to the required format, "yyyy-MM-dd".
engram-design commented 2 years ago

Okay, so what you should be getting is the following:

submit
beforeSubmitEvent
beforeSubmitEventAfter
beforeSubmitEventAfterDispatch
beforeValidate
validateFail

So at least we're getting somewhere. I've just added some more debug statements into the validate functions, if you could run that command again to test (sorry for all the back-and-forth)

romainpoirier commented 2 years ago

After run composer update, this is what I now get in the JS console on submit:

submit
beforeSubmitEvent
beforeSubmitEventAfter
beforeSubmitEventAfterDispatch
beforeValidate
onValidate
goBack: undefined
validate
validateFocus: true
validationOnSubmit: true
invalidFields: 0
this.validate(): true
validate
validateFocus: true
validationOnSubmit: true
invalidFields: 0
beforeFormieCaptchaValidate
afterFormieCaptchaValidate
afterFormieCaptchaValidateDispatch
submitForm
submitFormBefore
submitFormAfter
submitFormFail
engram-design commented 2 years ago

Okay, so the invalidFields: 0 is faulty here, as it doesn't seem to count any fields with validation issues. I've just pushed another update to try, which dives into the fields themselves.

By the way, if you're getting annoyed about pulling these updates, you're welcome to edit the JS yourself. If you cd to the vendor/verbb/formie directory, run npm install then, npm run watch you should be able to edit the JS files themselves, and they'll be compiled.

Or, if it's quicker/easier over Discord, your welcome to ping me @crawf.

romainpoirier commented 2 years ago

Here is the new console result:

validate
validateFocus: true
validationOnSubmit: true
<form id="formie-form-10053962a1de0d6d1a6" class="fui-form fui-labels-above-input   validate" method="post" enctype="multipart/form-data" accept-charset="utf-8" data-submit-method="page-reload" data-submit-action="entry" data-loading-indicator="spinner" data-config="{"formHashId":"formie-form-10053962a1de0d6d1a6","formId":100539,"formHandle":"cartoonSpringboardProjectSubmissionForm","registeredJs":[{"src":"https://website.local/cpresources/d179c99b/checkbox-radio.js?v=1654775216","module":"FormieCheckboxRadio"},{"src":"https://website.local/cpresources/d179c99b/date-picker.js?v=1654775216","module":"FormieDatePicker"},{"src":"https://website.local/cpresources/d179c99b/repeater.js?v=1654775216","module":"FormieRepeater"},{"src":"https://website.local/cpresources/d179c99b/phone-country.js?v=1654775216","module":"FormiePhoneCountry"},{"src":"https://website.local/cpresources/d179c99b/file-upload.js?v=1654775216","module":"FormieFileUpload"},{"src":"https://website.local/cpresources/d179c99b/conditions.js?v=1654775216","module":"FormieConditions"}],"settings":{"submitMethod":"page-reload","submitActionMessage":"Submission saved.","submitActionMessageTimeout":"","submitActionMessagePosition":"top-form","submitActionFormHide":"","submitAction":"entry","submitActionTab":"same-tab","errorMessage":"Couldn’t save submission due to errors.","errorMessagePosition":"top-form","loadingIndicator":"spinner","loadingIndicatorText":"","validationOnSubmit":"1","validationOnFocus":"","scrollToTop":"1","hasMultiplePages":true,"pages":[{"settings":{"submitButtonLabel":"Submit","backButtonLabel":"Back","showBackButton":false,"buttonsPosition":"left","cssClasses":null,"containerAttributes":null,"inputAttributes":null,"enableNextButtonConditions":false,"nextButtonConditions":[],"enablePageConditions":false,"pageConditions":"{\"showRule\":\"show\",\"conditionRule\":\"all\",\"conditions\":[]}","enableJsEvents":false,"jsGtmEventOptions":[]},"id":"4349","layoutId":"189","name":"Project information","elements":[{"label":null,"instructions":null,"tip":null,"warning":null,"required":"0","width":100,"fieldUid":"50e07ff3-8b75-40e8-b486-91762245fd56"},{"label":null,"instructions":null,"tip":null,"warning":null,"required":"0","width":100,"fieldUid":"c6c2a6a4-dcc4-49c1-ba1d-1a5313cfaffc"},{"label":null,"instructions":null,"tip":null,"warning":null,"required":"0","width":100,"fieldUid":"571c841c-7667-4e91-b19b-c4a7b222fb25"},{"label":null,"instructions":null,"tip":null,"warning":null,"required":"0","width":100,"fieldUid":"d87893f0-4d16-462f-b796-b063f79b1089"},{"label":null,"instructions":null,"tip":null,"warning":null,"required":"1","width":100,"fieldUid":"f95b1e0d-bc97-4bcb-a397-d777afc9f1aa"},{"label":null,"instructions":null,"tip":null,"warning":null,"required":"0","width":100,"fieldUid":"050c88f4-636c-4c66-a9b6-52c1eade2f6c"},{"label":null,"instructions":null,"tip":null,"warning":null,"required":"1","width":100,"fieldUid":"bc89dcc8-71b3-4420-bafa-c847292de2d0"},{"label":null,"instructions":null,"tip":null,"warning":null,"required":"0","width":100,"fieldUid":"9d326dc7-ee87-45cd-b3fe-cb2f3d2a931c"},{"label":null,"instructions":null,"tip":null,"warning":null,"required":"0","width":100,"fieldUid":"1aa52371-6b31-4e1a-9d21-22cf05d062c8"},{"label":null,"instructions":null,"tip":null,"warning":null,"required":"0","width":100,"fieldUid":"840e55e4-467f-4f57-a412-a00971d4596e"},{"label":null,"instructions":null,"tip":null,"warning":null,"required":"0","width":100,"fieldUid":"45bf7b94-4df8-47e8-bcbe-e5783cda1c9b"},{"label":null,"instructions":null,"tip":null,"warning":null,"required":"1","width":100,"fieldUid":"5725f40e-b24d-47ee-89de-fdd02a015095"},{"label":null,"instructions":null,"tip":null,"warning":null,"required":"0","width":100,"fieldUid":"1b3ef676-08b2-42f1-bfd6-38d4bef9ad7d"},{"label":null,"instructions":null,"tip":null,"warning":null,"required":"0","width":100,"fieldUid":"b1061117-5656-45b1-85ca-84847979dcea"},{"label":null,"instructions":null,"tip":null,"warning":null,"required":"0","width":100,"fieldUid":"ce6ad1f2-b264-48cf-acc5-773cb39803f2"},{"label":null,"instructions":null,"tip":null,"warning":null,"required":"0","width":100,"fieldUid":"ff142a56-13c8-4a21-a833-6791e4379b85"},{"label":null,"instructions":null,"tip":null,"warning":null,"required":"0","width":100,"fieldUid":"e63ea086-5c03-4c94-93bb-99bb429418aa"},{"label":null,"instructions":null,"tip":null,"warning":null,"required":"0","width":100,"fieldUid":"9391d517-9c05-4a46-9baf-3d2cc1524723"},{"label":null,"instructions":null,"tip":null,"warning":null,"required":"0","width":100,"fieldUid":"30c020b9-bffc-40f0-9a46-76e146264fb6"},{"label":null,"instructions":null,"tip":null,"warning":null,"required":"0","width":100,"fieldUid":"20dbeb78-960f-4b4b-a630-379309dd0cc2"},{"label":null,"instructions":null,"tip":null,"warning":null,"required":"0","width":100,"fieldUid":"8005046f-6f3a-4405-818a-89545de2397c"},{"label":null,"instructions":null,"tip":nul…5a4300a3d1"},{"label":null,"instructions":null,"tip":null,"warning":null,"required":"0","width":100,"fieldUid":"540b6d71-65ae-43ad-9317-33cc68476eb0"},{"label":null,"instructions":null,"tip":null,"warning":null,"required":"0","width":100,"fieldUid":"e3a894f7-44be-403a-b84a-d08b575522ea"},{"label":null,"instructions":null,"tip":null,"warning":null,"required":"0","width":100,"fieldUid":"a545aed6-269a-4250-94fe-dceb70456e26"},{"label":null,"instructions":null,"tip":null,"warning":null,"required":"0","width":100,"fieldUid":"9f047c0a-660d-4b88-85ef-9b41a3f31c71"},{"label":null,"instructions":null,"tip":null,"warning":null,"required":"0","width":100,"fieldUid":"6c12711a-b701-47ca-96dc-e5de91a0d741"},{"label":null,"instructions":null,"tip":null,"warning":null,"required":"1","width":100,"fieldUid":"f307bb99-6d51-4189-8cb9-0cb353cb0557"},{"label":null,"instructions":null,"tip":null,"warning":null,"required":"0","width":100,"fieldUid":"8e5f1492-b295-4a9b-ac90-60b547f9ab51"},{"label":null,"instructions":null,"tip":null,"warning":null,"required":"0","width":100,"fieldUid":"20a63a75-d383-4f1e-b807-4a6ce1218e75"},{"label":null,"instructions":null,"tip":null,"warning":null,"required":"1","width":100,"fieldUid":"60ead6de-7128-4e2f-9807-209e9e213ab5"},{"label":null,"instructions":null,"tip":null,"warning":null,"required":"0","width":100,"fieldUid":"49a8128e-2759-4a1c-8d0e-1b8eedf1b682"},{"label":null,"instructions":null,"tip":null,"warning":null,"required":"0","width":100,"fieldUid":"5740e47c-8dce-4870-896b-d360fad2d90c"},{"label":null,"instructions":null,"tip":null,"warning":null,"required":"0","width":100,"fieldUid":"0394f512-a0cc-4df3-a558-518b2fea339a"},{"label":null,"instructions":null,"tip":null,"warning":null,"required":"1","width":100,"fieldUid":"1765969b-6744-49c0-95fa-8c87f6be1c52"},{"label":null,"instructions":null,"tip":null,"warning":null,"required":"1","width":100,"fieldUid":"aaaab8e0-1caf-42b4-80e5-11c7312887dc"},{"label":null,"instructions":null,"tip":null,"warning":null,"required":"0","width":100,"fieldUid":"19f069a9-083e-45d6-8453-bccd886c5c97"},{"label":null,"instructions":null,"tip":null,"warning":null,"required":"0","width":100,"fieldUid":"5e02b552-158a-47d0-b485-7d6c4c33cb08"},{"label":null,"instructions":null,"tip":null,"warning":null,"required":"0","width":100,"fieldUid":"76e4a873-8659-443a-83f3-98f27f2864d6"},{"label":null,"instructions":null,"tip":null,"warning":null,"required":"0","width":100,"fieldUid":"17193c48-2c39-4fa9-ba7b-421c0ad8d090"}],"sortOrder":"2","uid":"0c6dfb4b-8b78-4a34-b3ce-2982819bbb02"},{"settings":{"submitButtonLabel":"Submit","backButtonLabel":"Back","showBackButton":true,"buttonsPosition":"left","cssClasses":null,"containerAttributes":null,"inputAttributes":null,"enableNextButtonConditions":false,"nextButtonConditions":[],"enablePageConditions":false,"pageConditions":"{\"showRule\":\"hide\",\"conditionRule\":\"all\",\"conditions\":[{\"id\":\"new3901-8520\",\"field\":\"{checklist}\",\"condition\":\"=\",\"value\":\"1\"}]}","enableJsEvents":false,"jsGtmEventOptions":[]},"id":"4352","layoutId":"189","name":"Budget","elements":[{"label":null,"instructions":null,"tip":null,"warning":null,"required":"0","width":100,"fieldUid":"f1df07df-87ab-4a87-95cc-5cc5a60e8d22"},{"label":null,"instructions":null,"tip":null,"warning":null,"required":"1","width":100,"fieldUid":"156e2275-f0c2-4d3a-8825-2128cdc25ba9"}],"sortOrder":"3","uid":"09eed0ff-8261-4991-b6e5-17f401ac2864"},{"settings":{"submitButtonLabel":"Submit","backButtonLabel":"Back","showBackButton":true,"buttonsPosition":"left","cssClasses":null,"containerAttributes":null,"inputAttributes":null,"enableNextButtonConditions":false,"nextButtonConditions":[],"enablePageConditions":false,"pageConditions":"{\"showRule\":\"hide\",\"conditionRule\":\"all\",\"conditions\":[{\"id\":\"new3621-9521\",\"field\":\"{checklist}\",\"condition\":\"=\",\"value\":\"1\"}]}","enableJsEvents":false,"jsGtmEventOptions":[]},"id":"4353","layoutId":"189","name":"Summary","elements":[{"label":null,"instructions":null,"tip":null,"warning":null,"required":"0","width":100,"fieldUid":"da085bdb-cf7a-4b81-80db-29e54205f41e"},{"label":null,"instructions":null,"tip":null,"warning":null,"required":"1","width":100,"fieldUid":"b1d1145c-1bf5-49ec-8dec-e5ff97ed341a"},{"label":null,"instructions":null,"tip":null,"warning":null,"required":"1","width":100,"fieldUid":"bea139a1-7308-4e73-b74f-ee52afcd499a"},{"label":null,"instructions":null,"tip":null,"warning":null,"required":"0","width":100,"fieldUid":"070f75ac-665b-4a75-8525-f654212765f5"}],"sortOrder":"4","uid":"4391a008-642f-4bd8-aec2-263d40fbf64f"}],"redirectUrl":"","currentPageId":"4351","outputJsTheme":true,"enableUnloadWarning":true,"ajaxTimeout":10}}" novalidate="true">…</form>
<div id="formie-form-10053962a1de0d6d1a6-p-4351" class="fui-page" data-index="2" data-id="4351">…</div>
<div id="formie-form-10053962a1de0d6d1a6-p-4351" class="fui-page" data-index="2" data-id="4351">…</div>

{valid: true, errors: {…}}

{valid: true, errors: {…}}

{valid: true, errors: {…}}

{valid: true, errors: {…}}

{valid: true, errors: {…}}

{valid: true, errors: {…}}

{valid: true, errors: {…}}

{valid: true, errors: {…}}

{valid: true, errors: {…}}

{valid: true, errors: {…}}

{valid: true, errors: {…}}

{valid: true, errors: {…}}

{valid: true, errors: {…}}

{valid: true, errors: {…}}

{valid: true, errors: {…}}

{valid: true, errors: {…}}

{valid: true, errors: {…}}

{valid: true, errors: {…}}
invalidFields: 0

No worry, I can follow up here in this ticket for any later reference.

engram-design commented 2 years ago

Huh, is there nothing rendered before those {valid: true, errors: {…}} like on my end?

image
romainpoirier commented 2 years ago

Not exactly. Immediately on submit, these lines are blank. When the page reload hapens + Preserve log option checked in Chrome, I get this:

log
engram-design commented 2 years ago

Aha, looks like I can finally replicate this now. I'll tackle this tomorrow!

engram-design commented 2 years ago

Hopefully that should be fixed in:

"require": {
  "verbb/formie": "dev-craft-3 as 1.5.19",
  "...": "..."
}

Then run composer update.

romainpoirier commented 2 years ago

Thank you. We're almost there.

I don't know if this is what block the fix, but I now get this unrelated JS error:

phone-country.js?v=1654844456:1 Uncaught TypeError: Cannot read properties of undefined (reading 'toUpperCase')
at Object.phoneCountry (phone-country.js?v=1654844456:1:27155)
at formie.js?v=1654844456:1:12992
at d (formie.js?v=1654844456:1:13008)
at x.validate (formie.js?v=1654844456:1:16225)
at formie.js?v=1654844456:1:16406
at NodeList.filter (<anonymous>)
at x.validateAll (formie.js?v=1654844456:1:16334)
at e.value (formie.js?v=1654844456:1:25735)
at HTMLFormElement.<anonymous> (formie.js?v=1654844456:1:21940)
at a (formie.js?v=1654844456:1:11763)

Also, please give this try:

  1. Leave everything blank, then submit: you get the JS validation error on top + under fields;
  2. Fill in every inputs expect file inputs, then submit again: get the phone-country.js error, and on page reload only get the errors under file fields, so no general notice on top (like before the update);
engram-design commented 2 years ago

Can you let me know the settings of your phone field? I can't seem to replicate that, but it's something related to the selected country.

Note: I have also just pushed a fix that I believe might address this.

romainpoirier commented 2 years ago

Thank you, there is no special settings on it, only the default ones. After running again the composer update I now can't reproduce the error in every scenario I described. Thank you!

engram-design commented 2 years ago

Sounds good, going to mark this as closed!