First of all: Really strange, but I can't seem to open a new ticket in the forum. When I click on "Report a new issue", I'm simply redirected to my account profile page.
Anyway, my follow-up question: The error message is correctly shown, but the file name is still shown in my form (see screenshot 2). And if you simply go ahead and submit the form again, then the post and the "File" field are actually saved without error message (see screenshot 3). BUT: The file isn't actually uploaded. So the "File" field actually links to a non-existing file.
This is obviously really bad. Is this actually the default behaviour for Toolset forms? How can I fix this? The obvious solution would be to clear the field if an error message occurs. I tried different methods to clear the field in the "my_validation" function you provided:
$fields['wpcf-beleg-einnahme'] = array();
and
$fields['wpcf-beleg-einnahme']['value'] = '';
But it doesn't work. I think the $fields variable doesn't actually return the values to the form. Any idea how I can fix this?
That will be problematic, maybe if we find a way to flag that the validation is already happen and then use Javascript to clear the input box do the trick.
The PHP part for the validation and flag addition:
add_filter('cred_form_validate', 'my_validation', 10, 2);
function my_validation($error_fields, $form_data) {
$form_id = 12345; // Replace with your actual form ID
if ($form_data['id'] != $form_id) {
return $error_fields;
}
list($fields, $errors) = $error_fields;
$error_flag = false;
if (isset($_FILES['wpcf-beleg-ausgabe']) && $_FILES['wpcf-beleg-ausgabe']['size'] > 10000) {
$errors['wpcf-beleg-ausgabe'] = 'FILE SIZE TOO BIG';
$error_flag = true;
}
if (isset($_FILES['wpcf-beleg-einnahme']) && $_FILES['wpcf-beleg-einnahme']['size'] > 10000) {
$errors['wpcf-beleg-einnahme'] = 'FILE SIZE TOO BIG';
$error_flag = true;
}
// Add a hidden field to pass the error flag to the front-end
if ($error_flag) {
$fields['error_flag'] = array(
'type' => 'hidden',
'value' => '1'
);
}
return array($fields, $errors);
}
Anyway: Your code nearly works. The only problem is the EventListener DOMContentLoaded: I use AJAX submit for my form, so the DOMContentLoaded event isn't firing after submitting the form (or better said: It fires only once, and therefore doesn't get the "error_flag" after the AJAX submit).
So I have no idea if there is another way? Maybe it makes more sense to figure out why it isn't working as it should? Anything I could check/test?
document.addEventListener('DOMContentLoaded', function() {
const form = document.querySelector('form'); // Adjust selector if needed
form.addEventListener('submit', function(event) {
event.preventDefault(); // Prevent the default form submission
// Use AJAX to submit the form
const formData = new FormData(form);
const xhr = new XMLHttpRequest();
xhr.open('POST', form.action, true);
xhr.onload = function() {
if (xhr.status === 200) {
const parser = new DOMParser();
const doc = parser.parseFromString(xhr.responseText, 'text/html');
const errorFlag = doc.querySelector('input[name="error_flag"]');
// Check for the error flag in the response
if (errorFlag && errorFlag.value === '1') {
document.querySelector('input[name="wpcf-beleg-ausgabe"]').value = '';
document.querySelector('input[name="wpcf-beleg-einnahme"]').value = '';
} else {
// Handle successful form submission
// Add any necessary actions here if needed
}
} else {
// Handle error (e.g., show error message)
console.error('An error occurred during the form submission');
}
};
xhr.send(formData);
});
});
Honestly, it is getting complicated when Ajax is in the mix and I think it will be hard for us to maintain the code if something else happens or it is not working as expected.
Sorry for my late reply and thanks for your answer, but I don't want to go this route and then have bigger problems down the line. It seems a bit hacky.
Now 2 questions:
1. Am I correct to assume, that this is not the expected behaviour for the Toolset forms? Meaning this is actually somehow a problem/bug on my site?
2. If it is not the expected behaviour: Do you have any suggestion how to narrow down the problem? I can't imagine how another plugin or the theme could somehow cause this...
Now the reason why I would prefer to filter it within the Toolset form, is because directly in WordPress I can't limit the upload file size limit dependent on the file type. And I would really like to give a much bigger limit for .jpg files, because those I can automatically resize und optimize... Anyway, that just as some context.
Christopher is on vacation. This is Minesh here and I'll try to help you further. Hope this is OK.
Can you please share problem URL where you added the form as well as admin access details and also share what is the image file size you want to restrict and do you also want to restrict the file type? Also - you want to apply the validation for what custom fields?
Please share all those required details with problem URL and admin access details.
*** Please make a FULL BACKUP of your database and website.***
I would also eventually need to request temporary access (WP-Admin and FTP) to your site. Preferably to a test site where the problem has been replicated if possible in order to be of better help and check if some configurations might need to be changed.
I have set the next reply to private which means only you and I have access to it.
Can you please specify with what form you have issue with?
In addition to that - what if you try to create a new page and try to add your target form to this page and check if ajax submit works as expected with "cred_form_validate" hook.
- Do you see any difference?
At the moment I have it only implemented on the first form (the green one under "Einnahme").
Good idea, maybe 2 forms on one page somehow create a conflict. But I just tried it on another page with only the form and still the exact same problem (you can check here: /app/ausprobieren-test/ ).
You can ignore the "Submit" button, this is for the search field. Sorry I was working on it yesterday and disabled the code. If you try again now with the .png file you used yesterday, you see the error (see screenshot 4 i attached). If you now click "Buchen" again, the entry is saved and you see it in the table below, with a link to the supposedly save file, but the link to the file leads to an 404 error, because the file isn't actually uploaded (see screenshot 5).
Just as a warning: Don't try it with .jpg files, because those are excluded from the upload file size limit (which is 100KB at the moment):
[code]
add_filter('cred_form_validate', 'my_file_upload_validation', 10, 2);
function my_file_upload_validation($error_fields, $form_data) {
if ( $form_data['id'] == 119 || $form_data['id'] == 160 || $form_data['id'] == 167 ) {
list($fields, $errors) = $error_fields;
$error_flag = false;
// Bilder überspringen, da diese automatisch optimiert werden
if ( !( $_FILES['wpcf-beleg-einnahme']['type'] == 'image/jpeg' ) ) {
/*if (isset($_FILES['wpcf-beleg-ausgabe']) && $_FILES['wpcf-beleg-ausgabe']['size'] > 10000) {
$errors['wpcf-beleg-ausgabe'] = 'FILE SIZE TOO BIG';
}*/
if ( $_FILES['wpcf-beleg-einnahme']['size'] > 10000 ) {
//$fields['wpcf-beleg-einnahme'] = array();
$fields['error_flag'] = array(
'type' => 'hidden',
'value' => '1'
);
$errors['wpcf-beleg-einnahme'] = 'FILE SIZE TOO BIG ' . json_encode($fields);
//unset($fields['wpcf-beleg-einnahme']);
//$fields['wpcf-beleg-einnahme']['value'] = '';
$error_flag = true;
}
}
// Add a hidden field to pass the error flag to the front-end
if ($error_flag) {
$fields['error_flag'] = array(
'type' => 'hidden',
'value' => '1'
);
}
}
return array($fields, $errors);
}
[/code]
Thanks. The form itself seems to be complicated and the only thing that i could do is to add another JS code to the form:
jQuery(document).on('cred_form_ready', function() {
const form = jQuery('form'); // Adjust the selector as needed
form.on('submit', function(event) {
// Prevent default submit behavior if needed
event.preventDefault();
// Check if the error flag exists in the current form data
const errorFlag = jQuery('input[name="error_flag"]').val();
if (errorFlag === '1') {
// Clear the file input fields if the error flag is set
jQuery('input[name="wpcf-beleg-ausgabe"]').val('');
jQuery('input[name="wpcf-beleg-einnahme"]').val('');
} else {
// Proceed with form submission via AJAX
this.submit();
}
});
});
The difference is that it uses "cred_form_ready" which will handle the Ajax load.
Now you will not see any scenarios that the online link shows and it leads to 404.
But it still can submit the form when the field is empty somehow but this time it shows something like the attached screenshot.
Thanks a lot for the help. Unfortunately this JavaScript has now somehow the side effect, that the form fields aren't cleared anymore after submitting.
