JavaScript error after selecting a file from a required file field
-
Hi, I have an issue on a form which I have basically narrowed down to happening when a [file] field is set to “required”, e.g.
[file* documents id:documents class:required-field limit:4mb filetypes:jpg|jpeg|pdf]When I select a file I get this JavaScript error in the browser console after selecting the file:
Unhandled Promise Rejection: TypeError: t.trim is not a function. (In 't.trim()', 't.trim' is undefined)I am then unable to submit the form as the validation still thinks that there is an invalid field.
After a fair bit of googling etc trying to troubleshoot it seems like this relates to the underlying SWV validation in CF7. So for some reason when a file field is set to “required” it triggers this error, without “required” it works just fine.
Unfortunately troubleshooting this issue has been a little more complicated in that I actually have a Staging and a Live version of the site, but the issue is only occurring on the Staging version. I have exactly the same theme, form template HTML, JavaScript on both sites (running on the same server, PHP version etc), but it only occurs on the Staging site.
I’m not sure if it’s helpful / relevant or not but if I compare the SWV schemas for the form on both Staging and Live and they don’t seem to match, specifically on Staging it has this 4th ruleset related to the “documents” field:
{
"rule": "required",
"field": "documents",
"error": "The field is required."
}The other rulesets for “documents” that are in the schema on both Staging and Live are these:
{
"rule": "requiredfile",
"field": "documents",
"error": "The field is required."
},
{
"rule": "file",
"field": "documents",
"accept": [
".jpg",
".jpeg",
".pdf"
],
"error": "You are not allowed to upload files of this type."
},
{
"rule": "maxfilesize",
"field": "documents",
"threshold": 4194304,
"error": "The file is too big."
},Thanks for any help!
-
@takayukister The multi-step form functionality is my own code, it is basically some JavaScript code that handles the steps and does some of its own validation on the fields at each step by checking which fields are set as “required”. Generally I don’t rely on the default CF7 validation for these forms as the aim is to ensure everything is valid before the user proceeds to the next step and then to ultimately submit the form. In this case however it does seem to be the CF7 validation that is being triggered when the required file field is used. I am definitely happy to find an issue in my code which is causing or contributing to this error but so far I have not been able to. It’s the difference in behaviour between the Staging and Live versions of these sites / forms which is the key issue.
Sorry, one thing I should have included before is a link to the Live version of this same form which doesn’t trigger the error so that you can compare. This is the most confusing aspect of this issue, why the error occurs on the Staging site but not on Live. Here is a link to the Live version (Note, please don’t submit the form on the Live version as this an active form, the key point to note is when you actually select a file with the file selector, on Staging you should see the JS error, on Live you should not):
https://qreate.co.uk/cf7form-issue-live
Can you comment on the differences in the SWV schemas that I highlighted in my original post, this does seem to be an important difference between the two forms. I have a few questions about the schema:
- Does the SWV schema get updated when a form is saved?
- And does this schema get affected by updates to the CF7 plugin itself?
- Is the 4th ruleset I show in my original post an expected rule that should exist for forms with a “required” file field?
- The contact form entry on the Live site has not been updated / saved recently, so if the SWV schema is affected by updates and saving I am wondering then will this SWV schema change to match what is happening on the Staging site?
The last question above has been my main concern, at the moment the issue is only happening on Staging, but the form continues to work on the Live site. So I am concerned that updating / saving the form post on Live is going to introduce the same error.
The topic ‘JavaScript error after selecting a file from a required file field’ is closed to new replies.
