Hello,
I have a RG, in which I have a X number of inputs (depending on how many input the admin has configured in his form personalisation).
The problem is I added a condition that if “This inputs {is_compulsory} is yes THEN make this input should not be empty”.
However, the validate button is outside of the RG, and somehow it’s not able to check if a compulsory input inside the RG is left empty.
How can I solve this please ?
One approach would be to use the “Classify” plugin.
You set a condition on each input that if “required is YES and this inputs value is empty” then: {addClass: Required}.
Upon clicking “Validate” you would run javascript to look for any elements with the class “Required”.
function checkIsReq{
const isReq = document.querySelectorAll(‘.Required’);
const hasVisibleReqInputs = Array.from(isReq).some(el => el.offsetParent !== null);
bubble_fn_isReq(hasVisibleReqInputs);
}
checkIsReq ();
Have a javascript to bubble element setting the suffix as “isReq” that triggers an event and publishes a value, of type Yes/No.
Create an action for “A javascript to Bubble event” selecting the J2B you just set up
Within this you can trigger a custom event to carry on the actions if no required inputs are empty (i.e what you want it to do) with condition that J2B’s value = “no”.
Else show an error message “Please fill in all required inputs”.
In summary, you conditionally apply a class to an input if its value is required but not populated. You run a javascript function to check for the existence of any elements with this class. If 1 or more exists, it means a required input is empty = do not proceed.
If none are found, all is ok = Continue.
You do not need a validate button as Bubble will validate it for you automatically if the checkbox for ‘should not be empty’ is checked and you are using that input value in a workflow that runs, which if the input is empty, bubble shows it as ‘invalid’.
Additionally, if you are going to be running a workflow from outside of the RG you can not use elements from within the RG in the workflow actions, so as mentioned, you could use javascript, or you can try to use a free plugin called Orchestra that allows you to run workflows from outside of an RG using the element values inside of the RG.
Thank you for your reply,
However, I don’t get it, how do I {addClass : Required} inside the input condition ? Thru ID Attribute ? Maybe it’s via Workflow ?
I added as suggested a conditionnal on my input (see image).
Look up the “classify” plugin, yes you add this in the ID attribute (within the conditional). Within the main “Appearance” tab you will want to add in the ID attribute the {removeClass: Required} so that when the condition isn’t met it isn’t falsely inheriting that class.
You don’t need the “This input should not be empty”, just to assign the class.
The javascript will then look to see if 1 or more instances of an element with that class exist, if so it will trigger the “error” pathway, else you would continue to next step.
Yes thank you very much.
It resolved my problem.
This topic was automatically closed after 70 days. New replies are no longer allowed.
