yootheme + live validation broken

Hi everybody,

I'm trying to figure out why the live validation does not work properly.
I want it to act like on Max's contact page >> http://chronoengine.com/contactus.html. If leaving the field with correct entries it should stay valid/green.
Settings are:
Enable Validation: Yes
Validation Library: mootools
Run Validation onlyOnBlur: No

Latest Joomla, latest Chronoform versions installed. It's a yootheme template.
And there is the problem. Changing to default joomla theme the validation works.
But how to figure out what is causing the error. I couldn't find anything with firebug.
Link: http://www.illunice.de/de/kontakt.html

Thanks for any help.
Best,
Martin

Hi Martin,

Something on your page (probably the menus) is using JQuery and this conflicts with teh MooTools library used by Joomla and by ChronoForms. If you look at your form without the tempale you'll see that it is all working OK.

There were a couple of good fixes for the JQuery problem posted here recently.

Bob

Thanks Bob,

i know that it's working without the template.
jQuery cannot be the culprit because no jquery is used in the template.
it must be a mootools conflict.
or does chronoforms use any kind of jquery?
that would explain it.

Thanks,
Martin

Hi Martin,

I see it's working now - so I guess you found the JQuery.

And, no, ChronoForms doesn't use JQuery at all.

Bob

Hi bob,

no it's not working. How does it come that you think it would?
Did i miss something?
There is definitely no jquery.

Thanks,
Martin

Hi Martin,

Apologies, my brain is clearly not at my desk this afternoon - I'll go see if I can find it . . .

Bob

Thanks a lot for your help. I really appreciate it.
I just can't find the error. It's definitely caused by the template.
But if I disable the mootools and the additional jscripts coming with
the template it still doesn't work.
And i don't know why.

Best,
Martin

e.g. now i have disabled all template related jscripts and mootools version too.
Still it doesn't work.

Hi Martin,

Looks like the reset.css file in the template also sets the input border when you hover over it and this appears to conflict with the ChronoForms validation css.

Bob

Hi Bob,

great, that's it. How do you come to this conclusion so quickly?
I will take a look into it and post what I have done or decided.

Best,
Martin

Hi Martin,

FireBug, the FireFox extension is excellent for checking which CSS is being applied.

Bob

I use firebug too. After pointing me on the reset.css it was quite clear.
I should have simply checked everything concerning textarea, input, or select related things.
Long week, short night maybe😉
Thanks a lot.
The template from yootheme has defined some css for input[type='text'] which conflicted with chronoform css definitions for input valdi/invalid.
I just replaced

input[type='text']

with

input

in the reset.css from the Phoenix template and now it's working.
With that way the layout looks like i want to and chronoforms works, too.
The other way around would also be possible, but with more coding.

Again, many THANKS to Bob.

Hi Martin,

Great, glad it's all fixed.

In Firebug you can use click the blue icon thingy at the top left, then hover over your page to see the css for the current tag, then click the tag to select it and look more closely.

It helps that I have two screens though :-)

Bob

I am also having this problem with validation and yoothemes

I have done as you said to replace code in reset.css but this then leaves a very thin line around my image submit button.

http://www.go-text.com/index.php?option=com_chronocontact&chronoformname=join

Any ideas?

Thanks,


Seb

Hi Seb,

It's from here - reset.css line 87

textarea, input, input[type="password"], select {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:#FFFFFF none repeat scroll 0 0;
border:1px solid #C8C8C8;

Bob

Bob,

Made the change you suggest to reset.css - still has a box around around the submit button image (a neater one though!) have I followed your instructions correctly?

Thanks very much.

Seb

Hi Seb,

The problem is that you need to remove the border - but if you do it there you'll also lose the border for the input boxes. If you add style='border:none;' directly to the submit button tag that might do it.

Bob

it works! thanks a lot again! you are a legend.

I have the same trouble with Yootheme YOO_daylight template.
The form functions runs properly with the default templates of Joomla!, but not with YOO_daylight. 😟

Also there is no calendar icon near the "date" field (the 6th field from the top of this form).

The address of the form in the test site is: http://kirill.blogdns.com/joomla/index.php?option=com_chronocontact&Itemid=132

I've try to check CSS using Firebug, but didn't find the solution. I have also try to modify the reset.css file, like was recommended here, but it wasn't help too.

Please, help me to force this template to run properly with your wonderful component!


TEMPORARY SOLVED

I have switch off the "Show date" & "Enable Mootools" in the yoo_daylight template preferences, and both problems was solved.

I don't know, may be it will make some problems in future?

Hi T34,

Sorry I missed this post first time around.

You’re probably OK with this fix. Some templates load their own copy of MooTools and having that loaded as well as the Joomla! version that ChronoForms needs can cause conflicts.

Bob

Thank you, Bob.

I hope, it shall work.

Hello,

I have the same problem with Yoothemes yoo_nano. I dont know how to fix it! http://tinyurl.com/773wmqv

Anyone an idea? Please help!

Hi undergreat,

It looks to me as though there is something seriously wrong with the form setup. Please check the videos here especially 'A first form' and 'Email 1' and make sure that you have the form actions in the correct event boxes.

Bob

I did not get it to work. The validation is working with other templates, but not with Yootheme yoo_nano.

Could you suggest me something that I could do?

Would be so thankfull!

Hi undergreat,

Your template (or some other component) is loading the jQuery JavaScript library. Out of the box jQuery isn't compatible with the MooTools library used by Joomla! and ChronoForms. You can use jQuery with MooTools in no-conflict mode. There are various ways of doing this. The simplest is to add a line of script in the ChronoForms Form JavaScript box:

jQuery.noConflict();

This will free the $ operator which is used by MooTools, so you may need to update your own javascripts to use the longer jQuery operator.

There is also a neat Joomla! 1.5 system plugin named SC jQuery that allows you to control on which pages jQuery is loaded, and will always load it in no-conflict mode.

Bob