I've never been able to get the Toggle Submit form feature working correctly.
(And it doesn't cover the 'Apply 'button.)
First I should mention I'm using the latest versions of Fabrik and Joomla and php v.7.1.10 - with the standard bootstrap templates.
I could never figure why - but whenever I have tried using the Toggle Submit with Ajax Validation feature, the submit button was not being toggled as expected. It would not disable until the same element was edited twice. and once it disabled nothing I could do would make it enabled again - even when all of the invalid elements had obviously been fixed to pass validation tests and no red elements remained.
Over the past week I finally dove into the code in media/com_fabrik/js/form.php.
It seems like there is some pretty complex stuff going on there trying to keep track of what is valid, what needs to be validated, etc.
But from echoing values to the js console, it looks like the code was checking the validation on elements that should not have been included (ignoring the conditional php code that should have been checked to verify if the validation needed to be run or not?). That meant it was validating some hidden elements in the form which explains why I didn't see them in red.
After wondering how I could fix this and trying to figure out the difference between the variables being tracked (mustVaildate, mustValidateEls, this.hasErrors- my head spins) , on a whim, I thought - "Why is this all being done when the validation seems to work just fine otherwise - and we already know what elements didn't pass validation because they have a class that causes them to be displayed in red? "
So I tried simplifying the heck out of the code on form.php and this now works for me...
I changed the 'if' code at line 1121 inside
if (this.options.mustValidate)
(which is nested inside if (this.options.toggleSubmit) {
to just use
this.toggleSubmit(true);
Then in the toggleSubmit function at the bottom of the file (line 2507) I changed the code to ignore the 'on' (true/false) parameter passed to it and use this code instead - which basically counts the number of divs with the 'error' class and uses that to set the logical value of 'on' - which is then used to toggle the Submit (and Apply) button.
I also added a 'not-allowed' cursor to make it more obvious - and just use the title attribute to provide tip text.
You may notice I removed the check for fabrikSubmitWrapper - because that didn't work anyhow.
(And I wonder if that wrapper isn't what caused this to mess up to begin with? - i.e. some other javascript or css code not expecting that wrapper around the submit button?)
That goes back to this thread which seem to be unresolved?
Able to use "validation" tooltip for disabled submit button?
This is probably an oversimplification and there's something I'm missing here - which is why I didn't even try adding to github. But for now it works for me - and any and all feedback is welcome.
(And it doesn't cover the 'Apply 'button.)
First I should mention I'm using the latest versions of Fabrik and Joomla and php v.7.1.10 - with the standard bootstrap templates.
I could never figure why - but whenever I have tried using the Toggle Submit with Ajax Validation feature, the submit button was not being toggled as expected. It would not disable until the same element was edited twice. and once it disabled nothing I could do would make it enabled again - even when all of the invalid elements had obviously been fixed to pass validation tests and no red elements remained.
Over the past week I finally dove into the code in media/com_fabrik/js/form.php.
It seems like there is some pretty complex stuff going on there trying to keep track of what is valid, what needs to be validated, etc.
But from echoing values to the js console, it looks like the code was checking the validation on elements that should not have been included (ignoring the conditional php code that should have been checked to verify if the validation needed to be run or not?). That meant it was validating some hidden elements in the form which explains why I didn't see them in red.
After wondering how I could fix this and trying to figure out the difference between the variables being tracked (mustVaildate, mustValidateEls, this.hasErrors- my head spins) , on a whim, I thought - "Why is this all being done when the validation seems to work just fine otherwise - and we already know what elements didn't pass validation because they have a class that causes them to be displayed in red? "
So I tried simplifying the heck out of the code on form.php and this now works for me...
I changed the 'if' code at line 1121 inside
if (this.options.mustValidate)
(which is nested inside if (this.options.toggleSubmit) {
to just use
this.toggleSubmit(true);
JavaScript:
if (this.options.toggleSubmit) {
if (this.options.mustValidate) {
this.toggleSubmit(true);
/*
if (!this.hasErrors.has(id) || !this.hasErrors.get(id)) {
this.mustValidateEls[id] = false;
}
if (!this.mustValidateEls.hasValue(true)) {
this.toggleSubmit(true);
}
*/
}
else {
this.toggleSubmit(this.hasErrors.getKeys().length === 0);
}
}
Then in the toggleSubmit function at the bottom of the file (line 2507) I changed the code to ignore the 'on' (true/false) parameter passed to it and use this code instead - which basically counts the number of divs with the 'error' class and uses that to set the logical value of 'on' - which is then used to toggle the Submit (and Apply) button.
I also added a 'not-allowed' cursor to make it more obvious - and just use the title attribute to provide tip text.
JavaScript:
toggleSubmit: function (on) {
var submit = this._getButton('Submit');
var apply = this._getButton('apply');
var errcount = jQuery("#"+jQuery(this.form)['0'].id).find("div.error").length;
on = (errcount == 0);
if (typeOf(submit) !== 'null') {
if (on === true) {
submit.disabled = '';
submit.setStyle('cursor', 'pointer');
submit.setStyle('opacity', 1);
submit.setAttribute('title', 'Submit Form');
}
else {
submit.disabled = 'disabled';
submit.setStyle('cursor', 'not-allowed');
submit.setStyle('opacity', 0.5);
submit.setAttribute('title', 'Form cannot be saved until all inputs have been validated');
}
}
if (typeOf(apply) !== 'null') {
if (on === true) {
apply.disabled = '';
apply.setStyle('cursor', 'pointer');
apply.setStyle('opacity', 1);
apply.setAttribute('title', 'apply Form');
}
else {
apply.disabled = 'disabled';
apply.setStyle('cursor', 'not-allowed');
apply.setStyle('opacity', 0.5);
apply.setAttribute('title', 'Form cannot be applied until all inputs have been validated');
}
}
Fabrik.fireEvent('fabrik.form.togglesubmit', [this, on]);
}
(And I wonder if that wrapper isn't what caused this to mess up to begin with? - i.e. some other javascript or css code not expecting that wrapper around the submit button?)
That goes back to this thread which seem to be unresolved?
Able to use "validation" tooltip for disabled submit button?
This is probably an oversimplification and there's something I'm missing here - which is why I didn't even try adding to github. But for now it works for me - and any and all feedback is welcome.
Last edited: