field validationrules searched in container

enable validation for form fields using a class selector.

Overview

The issue occurs because CF's validation enable/disable events look for validation rules on the input element itself, not on its container div, when using a class as the identifier.
Instead of adding the class to the container, add it directly to the field using the 'Extra attributes' setting with the format 'class:yourClassName'. This ensures the event targets the correct element.

Answered
ChronoForms v6
em emmexx 04 Dec, 2017
In a rather complex form I enable/disable, enable/disable validation based on the values of a couple of checkboxes.
I set one field (a textarea) as Required and validation Disabled.
I add an event to a checkbox that enables validation using as identifier a class. I added the class in the Container class property of the field (the textarea).
When I check the checkbox nothing happens, the validation is not applied.

I checked the js code that cf adds to the form, in particular the following lines:
if(jQuery.inArray('enable_validation', event.action) > -1){
	if(event_target_one.data('validationrules')){
		var vrules = event_target_one.data('validationrules'); //*** this line never runs
		vrules['disabled'] = 0;
		event_target_one.data('validationrules', vrules);
		
		$.G2.forms.initializeForm(Form);
	}
}


The line that I marked in blue is never run.
If I understand correctly the code, the validation rules are searched for in the container, not in the textarea.

Is that correct?

maxx
em emmexx 06 Dec, 2017
I found out that a similar problem happens with the enable or disable event. When the Element(s) identifier property is a class, the js code tries to remove the disabled class from the container, not from the input element:
if(jQuery.inArray('enable', event.action) > -1){
	target_element.removeClass('disabled');
	event_target.prop('disabled', false);
	if(event_target.prop('tagName') == 'SELECT'){
		event_target.parent('.ui.dropdown').removeClass('disabled');
	}
}


Am I using the class feature the wrong way?

maxx
Max_admin Max_admin 23 Feb, 2019
Hi maxx,
​
Thanks for reporting the issue and apologizes for the late reply!
​
This is still not working with the latest update ? if yes then please create a demo form with the problem and send it to me!
​
Best regards
Max, ChronoForms developer
ChronoMyAdmin: Database administration within Joomla, no phpMyAdmin needed.
ChronoMails simplifies Joomla email: newsletters, logging, and custom templates.
em emmexx 26 Mar, 2019

This is still not working with the latest update ? if yes then please create a demo form with the problem and send it to me!


Sorry for the late reply, too.
Yes, it is still not working.
Since it has been a while since I posted this, I don't even remember the context and why I wanted to accomplish that.
I suppose that I wanted to enable/disable or enable/disable validation for a group of textareas identified by a class.
But the g2.forms.js code is expecting to find attributes that are not there when searching for a class and not a name or id.
In the line:
if(event_target_one.data('validationrules')){
event_target_one is
<div class="field myclass">
and validationrules is not there (for a textarea? I did not check other controls).
​
You can create a demo yourself.
Add a checkbox and a textarea to a form.
Set the textarea with Validation Required but Disabled. In the Container class of the textarea add a class to the default field (say myclass).
Add an event to the ckeckbox: On checked Enable validation with element identifier .myclass.
​
Expected result:
if the checkbox is not checked the textarea validation is disable and I can submit with an empty textarea.
if I check the checkbox, the textarea validation should be enabled and it shouldn't be possible to submit with an empty textarea.
​
Thank you
maxx
he healyhatman 26 Mar, 2019
Answer
You're doing it wrong. Don't add it to the container.
​
Under advanced -> Extra attributes put
class:myClass
em emmexx 26 Mar, 2019

You're doing it wrong. Don't add it to the container.


Probably... I didn't know the trick of the class in the Extra attributes.
But it works if the event action is Hide or Show. So it is a little bit confusing...
​
Thank you
he healyhatman 26 Mar, 2019
The hide/show works because you're hiding the div the field is in. Disable field doesn't work on the container because it's a container, not a field.
​
But at least now you know.
em emmexx 26 Mar, 2019

The hide/show works because you're hiding the div the field is in.
Disable field doesn't work on the container because it's a container,
not a field.


I understand the ratio. But without the class in the extra attributes trick I couldn't find how to reference a group of controls.
Anyway I keep believing that having a Class Container field but having to add a class for the field in the extra attributes can be confusing.
​
Thank you
Max_admin Max_admin 26 Mar, 2019
In order to enable/disable validation you need to target a field, with the field name, #id OR container :input:
field_name
#field_id
#container_id :input
Best regards
Max, ChronoForms developer
ChronoMyAdmin: Database administration within Joomla, no phpMyAdmin needed.
ChronoMails simplifies Joomla email: newsletters, logging, and custom templates.
em emmexx 26 Mar, 2019
What I wanted to point out is a UI matter (CF or CC UI, I mean).
If I read in a tooltip to a setting or parameter that I can reference an id, a name or a class I expect that the library will take care of selecting the right element for each type of event action. Not that I have to take care of it.
In a complex form it is not unusual to need to enable/disable, hide/show or enable/disable validation of many elements not necessarily grouped together.
Using a class to identify those elements is simpler than referencing every element by name, #id or #container_id :input
Anyway I put this thread in my favorites, I hope I'll remember the trick suggested by healyhatman.
This topic is locked and no more replies can be posted.