Forums

Hi Guys

I tried to reuse a YooTheme UIKit based CF4 contact form from Yoonique in CF5. The jQuery field validation code worked perfectly in CF4, but upon teasing the form, it caused the error message shown below. Any suggestion on how going from CF4 to CF5 might cause this problem? Screen shot is enclosed and jQuery source code is listed below for your reference.

Thank you very much for your assistance!

SH

"); $(form + " div.error-message").replaceWith('
' + $(form + " div.error-message").html() + "
"); }); jQuery(window).load(function() { formCheck
Notice: Undefined property: GCore\Extensions\Chronoforms\Libs\Form::$form_name in /home/meridi28/public_html/dev/administrator/components/com_chronoforms5/chronoforms/actions/js/js.php(33) : eval()'d code on line 10
_.focusOnError = function(b) { if (this.options.display.scrollToFirst && !this.alreadyFocused && !this.isScrolling) { var a; a = (b.getCoordinates().top - b.getCoordinates().bottom) / 2; this.isScrolling = true; if (window.getScroll().y != a) { new Fx.Scroll(window, { onComplete: function() { this.isScrolling = false; if (b.getProperty("type") != "hidden") { b.focus() } }.bind(this) }).start(0, a) } else { this.isScrolling = false; b.focus() } this.alreadyFocused = true } } }); jQuery(window).load(function() { formCheck
Notice: Undefined property: GCore\Extensions\Chronoforms\Libs\Form::$form_name in /home/meridi28/public_html/dev/administrator/components/com_chronoforms5/chronoforms/actions/js/js.php(33) : eval()'d code on line 35
_.setOptions({ errorClass: "uk-alert uk-alert-warning", fieldErrorClass: "", display: { errorsLocation: 3, indicateErrors: 2, flashTips: true, fadeDuration: 1001, showErrors: 1, addClassErrorToField: 0, } }); }); jQuery(document).ready(function($){ $("#chronoform-UIKContact").find(":input[name='firstname']").addClass('validate["required"]');$("#chronoform-UIKContact").find(":input[name='lastname']").addClass('validate["required"]');$("#chronoform-UIKContact").find(":input[name='email']").addClass('validate["required","email"]');$("#chronoform-UIKContact").find(":input[name='subject']").addClass('validate["required"]');$("#chronoform-UIKContact").find(":input[name='message']").addClass('validate["required"]'); $("#chronoform-UIKContact").gvalidate({}); }); jQuery(document).ready(function($){ function chronoforms_fields_events(){ } chronoforms_fields_events(); }); var RecaptchaOptions = { theme : 'white', lang : 'en' }; 

=====================

jQuery(function($) {
		var form = "#<?php echo 'chronoform_'.$form->form_name?>";
			$(form).addClass("uk-form uk-width-1-1 uk-vertical-align-middle tm-form-primary");
				$(form + " span.cf_alert").replaceWith('<div class="uk-alert uk-alert-danger uk-alert-large">' + $(form + " span.cf_alert").html() + "</div>");
					$(form + " div.error-message").replaceWith('<div class="uk-alert uk-alert-warning">' + $(form + " div.error-message").html() + "</div>");
});


jQuery(window).load(function() {
	    formCheck<?php echo '_'.$form->form_name?>.focusOnError =   function(b) {
		    			if (this.options.display.scrollToFirst && !this.alreadyFocused && !this.isScrolling) {
							var a;
							a = (b.getCoordinates().top - b.getCoordinates().bottom) / 2;
							this.isScrolling = true;
	
							if (window.getScroll().y != a) {
								new Fx.Scroll(window, {
									onComplete: function() {
		    							this.isScrolling = false;
										if (b.getProperty("type") != "hidden") {
											b.focus()
										}
									}.bind(this)
		    					}).start(0, a)
							} else {
								this.isScrolling = false;
								b.focus()
							}
							this.alreadyFocused = true
						}
		}
});


jQuery(window).load(function() {
	    formCheck<?php echo '_'.$form->form_name?>.setOptions({
		    		errorClass: "uk-alert uk-alert-warning",
		    		fieldErrorClass: "",
		    		display: {
						errorsLocation: 3,
		    			indicateErrors: 2,
		    			flashTips: true,
		    			fadeDuration: 1001,
		    			showErrors: 1,
		    			addClassErrorToField: 0,
		    		}
	    	});
});

Hi studiocardo,

There was no JQuery validation for CFv4 so I'm not clear exactly where this code is coming from.
I'm also not sure that the Cfv4 to CFv5 restore action will handle any for with custom code in it.

The immediate problem here I think is that in CFv4 you could get the current form name with $form->form_name but this does not work in CFv5. The equivalent code is $form->form['Form']['title']

You can probably hide the PHP notices by setting site Error Reporting to System Default or None but I'm not at all sure that the validation will then work.

If the form is simple the simplest solution is probably to rebuild in CFv5.

Bob

Hi Bob

The jQuery code is a part of the Yoonique bundle for CF4. I changed the $form->form_name as you suggested, but that wasn't the problem. But where is the $form->form['Form']['title'] documented? How can I find out more?

When I enabled FireQuery, I noticed a "string not terminated error message", but for the life of me I can't figure out where the mis-termination is.

Is there a document that I can read to get a better idea of how CF5 approaches both client and server side validations? I understand in the Setup there are various Actions that can be installed, but I can't use them with confidence. CF is an fantastic product, but a lack of documentation makes it a challenging for a feeble being like me.

The form is very straight forward and it has been rebuilt in CF5, but the jQuery validation code is now unusable, and I really like to figure out why.

Thx,
SH

Hi studiocardo,

I've never heard of the Yoonique bundle for CFv4 so can't help much with that.

The form name for CFv5 is only publicly documented in this thread; I worked it out by digging in the code a week or two ago to use it in a Debugger.

I agree with you that better documentation is needed; I am adding odd FAQs when I can. Unfortunately a new release brings a Catch 22 with it. I have to work out what the new features are; try to respond to some of a flood of new questions and find time to do some documentation. Sadly, and probably wrongly, the documentation loses out.

The good news is that several months in I am starting to get my head round much of the working of CFv5 so it no longer takes quite to long to work out what us happening.

If you want to post or PM a link to the form I can take a look and see if I can work out what is happening.

Bob

Hi Bob

Thank you for your quick reply.

I love CF, and I appreciate the effort you guys put into creating, maintaining, and supporting it. And I didn't really mean to sound negative, although all the users can really benefit from whatever that can help with their productivity… I believe the best documentation is a very thorough example that is made available to subscribers and (better yet) maintained by subscribers. I learned a lot about CF5 by going through the examples, so imagine what we can do if the examples are more targeted and sophisticated? I would certainly be happy to participate on creating something like that for the community.

In the meantime, could you foresee any problem using the jQuery validation plugin

http://jqueryvalidation.org/documentation/

with CF5?

Thx again,
SH

Hi Bob

A few general questions.

In CF5 setup, there is a JS Client Validation option. Could you advise how that is effected and how it should be used, namely:

1. I assume it's JS-based solution. But is it jQuery?
2. If a user uses the wizard, he can specify a field's validation requirements. Is that sufficient or does he still need to further specify the validation requirements in the JS Client Validation option?
3. For a form that uses custom code, how does it take advantage of what CF5 has built-in? Or is it easier to just go ahead and add his own jQuery code?
4. for a multipage form, I assume the validation code needs to be loaded for every page?

Sorry for asking these basic questions…

Thank you for your help.
SH

Hi SH,

I've rarely used the JS - Client Validation action but I believe that it is just an alternative way to add the validation classes to form elements. The other two ways are to use the Validation tab in the element or to add the validation class directly to the element Class box, or in custom HTML.

Once the validation class is added to an element the gvalidation library /libraries/cegcore/assets/gvalidation/gvalidation.js will be loaded and the validations applied from there. Adding a validation class is sufficient to load the library, nothing else is needed.

Is it jQuery? Yes, in the sense that the library is a jQuery extension - I believe that Max custom wrote this one for use in ChronoForms. No, in the sense that it isn't a standard jQuery / jQueryUI library.

Bob

PS The validation library in CFv4 was the MooTools Form Check library.

Hi Bob

Thank you for your input. It helps.

How and where does CF use the span.cf_alert? If no validation was chosen, span.cf_alert should not be inserted, correct?

I PM you the URL to the test form, and hopefully that gives you some insight to what it's doing. It adds a </script> tag for some reason…

Thanks again for your help

SH

Hi SH,

I can't help much with your custom JavaScript - my best guess is that the script includes </script> and that is breaking it.

cf_alert was used in CFv4 to show user messages, it's not used in CFv5. I think ti was added in CFv4 because some Joomla! templates were not set up to display Joomla! system messages :-(

Bob

Hi Bob

It's the identical piece of code. The extra </script> tag shows up only on CF5.

Ok, I'll see if I can do something w/ the span.cf_alert.

Now, I ported the example marketo form from jquery-validation.org into CF5. Per your suggestion on https://www.chronoengine.com/faqs/70-cfv5/5228-using-jquery-maskmoney-with-cfv5.html and
http://www.chronoengine.com/forums/posts/f2/t97003.html

I included the jQuery src via the following format:

http://mydomain.com/components/com_chronoforms5/jquery-validation-1.13.0/lib/jquery.js
http://mydomain.com/components/com_chronoforms5/jquery-validation-1.13.0/dist/jquery_validate.js
http://mydomain.com/components/com_chronoforms5/jquery-validation-1.13.0/lib/jquery.mockjax.js
http://mydomain.com/components/com_chronoforms5/jquery-validation-1.13.0/demo/marketo/jquery.maskedinput.js
http://mydomain.com/components/com_chronoforms5/jquery-validation-1.13.0/demo/marketo/mktSignup.js

And I verified the path directly through the URL on the browser. However, in Firebug, I kept getting the following error messages:

"NetworkError: 404 Not Found -
http://mydomain.com/components/com_chronoforms5/jquery-validation-1.13.0/lib/jquery.js%0D"
----
----

If I include only one file, then the error message is avoided. I think there is a bug in CF5's Setup / Basic / Load JavaScript / JS Files when it comes to multilines. CF did not trim off the carriage return characters. Could you verify that?

Thx,
SH

Hi SH,

What's the problem with using the core js validation in CFv5 ? I can improve it if needed.

There may be a bug with multi lines in files list in load js, but I can't verify this now, if it exists then it will be fixed in the next release, and you can now use the php code posted by Bob on the FAQ item to load the files on page.

Regards,
Max

Hi Max

The problem is that I use all custom HTML so I can't quite take advantage of it. Maybe this is an easier way:

1. create a dummy form with all the pertinent fields and validation requirements in the Designer, and then look at how the HT
ML's marked and then just apply the necessary ID to my own form.

2. then apply the JS Validation in Setup.

I'll give that a try. In the meantime, any pointer is always appreciated!

Thx,
SH

Just add this to your field's class attribute:

validate["required"]

pay attention for the quotes, if your class attribute encloses the value in double quotes then use single ones here!

Let me know how this works!

Regards,
Max

Hi Max

Yes, I noticed the use of validate["required"]. There are some additional ones like validate["group:1"], validate["group:7"], what do the "group"s represent?

Also, validate["digit","phone"], where can I find the details for this validation?

I assume all the validations specified in the Designer are enforced through HTML5? If JS or jQuery validations are to be used, additional specification must be set at either Designer/Validation or Setup/Validation? If that's the case, I might still need to rely on JS/jQuery, because HTML5 on iPad or iPhone is not particularly friendly/consistent to attributes such as "required", etc.

Thx, Max.
SH

Hi SH,

Just add validate["required"] to the class attribute.

Do you need to use other types of validation ? all of them are clear, the "group" validation is used for checkbox groups, the number marks the group, all checks in 1 group are validated together!

Regards,
Max

Hi Max

Have some questions about the validation…

1. the group #. Does this have to be a unique number? Other than used for a grouping purpose, what does the value of the group number signify? Right now, it looks like CF is using the group number in the validation alert, so if I use a group id of "92", the error message would say:

"Please make at least 92 selection(s)."

That is clearly not what is intended. What do you recommend?

2. red asterisk. It appears that only the very first element that have a validation option has a red asterisk, all the rest of them on the same page do not… Is this intended? It is definitely misleading to the users… Any recommendation on work around?

3. if I assign class="validation['group:51'] to a pair of radio inputs, does it automatically imply this pair of radio inputs are "required"? So far, this has not been reinforced consistently. How do I ensure at least one of the radio is selected? For example:

<input type="radio" id="seasonalallergy_yes" name="seasonalallergy" value="yes" rel="toggle-input" data-show="#div_seasonalallergy" class="validation['group:51']">
<label>Yes</label>
<input type="radio" id="seasonalallergy_no" name="seasonalallergy" value="no" rel="toggle-input" data-hide="#div_seasonalallergy" class="validation['group:51']">
<label>No</label>

The form would let me proceed even if neither input is selected… Is it because of the "del" and "data-hide"/"data-show"?

4. In a longer form, the error message can easily be out of the view if the submit button is pretty far from the offending element, is it possible to bring it to focus?

Thanks Max!

SH

Hi studiocardo,

Please use validate['required'] for radio button groups, as Max said the 'group' validation is for checkbox groups.

Also note that the class name is validate, not validation as in the HTML you posted.

Bob

Embarrassing!!… Yes, that should be validate[], not validation…

By the way, the class="validate['required']" option can NOT be applied to radio or multiselect because it considers the first option as required and you would be stuck unless you select the first one. That was the deficiency of the HTML5 "required" attribute, but I guess the same applies to the CF validation too… For future reference, mutliselect and radio only need class="validate['group:(a number)']", no "required" needed.

I am still having problem with the proper use of class="validate['group: ']. If I have two separate radio inputs, and it have to differentiate them by assigning a different group number to the validate; otherwise, if both groups have the same group number, then the requirement for the 2nd radio is automatically satisfied and thus render the validate useless. If I use different group number, then the problem I brought up in the last email applies…

Thanks for your help!
SH

Hi Studiocadrdio,

Just for clarity - 'radio buttons' are the round buttons that only allow a single choice; 'checkboxes' are the square boxes that do allow multiple choices.

Bob

Hi Bob

Yep.

H

Max

Have you had a chance to look into the JS validation errors I sent you last week? The errors can be easily duplicated on your side. As of now, the default JS validation is broken...

Thanks,
SH

Hi SH,

Could you please remind me by these errors ? I couldn't find any and maybe I have missed something.

Regards,
Max

Hi Max

1. the group # for class="validate['group:XXX'].

1a. the validate error message echoes the "group #", so if I use a unique group id such as "group:92", the error message would say:

"Please make at least 92 selection(s)."

That is clearly not what is intended.

1b. if I were to avoid the above issue by using same "group:1" for all groups, then all subsequent group validation requirements will be ignored as soon as the very first group with the same id has been selected. This is not right either...

1c. you can verify this by using the Wizard.

1d. could you advise how to specify a minimal of 2 inputs in a multi-select checkbox?

2. Red asterisk. It appears that only the very first element that have a validation option has a red asterisk, all the rest of them on the same page do not… This is definitely misleading to the users… Any recommendation on work around?

3. In a longer form, the error message can easily be out of the view, and that would be very confusing to general users.. Is it possible to bring it to focus? I assume I can create a <div> to house and focus the error message, but then I need to know what class attribute/name to assign to it for the CF validation.

Thank you for your help.

SH

Hi SH,

Thanks for clarifying this!

#1- please try this instead: group:id:limit, e.g: group:92:2, this will ask for 2 selections in group #92

#2- Which type of elements you mean ? I have forms with many required inputs and all of them have red asterisks, the asterisk is added after the label of the field.

#3- The field with the error gets the focus, please try to post a screenshot with the problem.

Regards,
Max

Hi Max

#1

Except the way it's set up right now, i.e., group:id:limit, the error message will always say 'Please make at least "$id" selection(s)" as opposed to "Please make at least "$limit" selection(s)". If you could tell me which JS file to change, I can make that mod myself before the fix is incorporated into the next patch release.

#2. Pls see attachment. If I use the Designer then all fields with class="validate" have the red asterisk. But since I have custom code w/ Yootheme class, I don't have the luxury. Please see attachment and you'll see the asterisks are absent.

#3. From what I have seen so far, it seems that most JS validation codes require the markup of a special error <div> for error message, perhaps I need to do that same?

I don't see a place to attach screenshots, so I'll email them to you.

#4. Further to the group:id:limit usage… Is there a way to specify min and max limit? Say group:id:[min,max]?

The completion of this form is really getting held up by the client side validation, and I really need to wrap this up, so your help is much appreciated!!

regards,
SH

Hi Max

Any news on the follow-up I sent to you on the 2nd? Thank you for your assistance.

regards,
SH

Max

> #1- please try this instead: group:id:limit, e.g: group:92:2, this will ask for 2 selections in group #92

This does not work for a multi-select checkbox. Alert error keeps popping up and halts the user from progressing the form. Could you verify that and advise a work-around?

Thank you for your help.
SH

Hi SH,

Strong apologies for the delay, I have just replied by email!

I'm sure the limit works, please make sure that you have the latest update installed, then clear your browser and website caches.

What happens when you create a test form using the designer ? does it have the same problem ? you can check the generated form code.

Regards,
Max