Forums

IE8 JS error on validation

rlab 07 Jun, 2012
Hi,

We are running Chronoforms 4.0 RC3.4.1 on a Joomla 2.5.4 site. When using IE8 if you go into a required input field, click to the next required input field, then click back into the first input field, you will have 2 validation error messages showing (that yo need to fill in the fields). Then fill in the first required input field when you click out of the field you get a JS error:

SCRIPT438: Object doesn't support property or method 'setStyle'
mootools-core.js, line 437 character 40
and this is the code that is highlighted in mootools-core.js:
a.setStyle(d,this.serve(c,b))

How do you fix this so validation works in IE8?

You can try it on this page: https://creditsolutions.ca/contact-us/quick-form

Thank you for your help on this problem.
GreyHead 08 Jun, 2012
Hi rlab,

I don't see any validation on the form so can't check anything. There are a lot of scripts on the page and you are probably seeing a conflict with one of them.

Bob
GreyHead 11 Jun, 2012
Hi rlab,

Checking with IE9 in IE8 browser mode I don't see this error :-(

Bob
rlab 11 Jun, 2012
Hi,

When I go to https://creditsolutions.ca/contact-us/worksheet. Put IE9 into IE8 browser mode, then click in the First name field, click in the Last Name field (not filling anything in, in either field), then click back into the First Name field. I now have 2 This field is required messages being displayed. In the first name field enter a name and click tab. It then pops up with a JS error about "Oject doesn't support property or method 'setStyle'" on line 437 of mootools-core.js.
GreyHead 11 Jun, 2012
Hi rlab,

Just checked again - nothing like that happening here.

Bob
rlab 11 Jun, 2012
Hi,

Just looking at another site: http://www.new.kevinjcorcoran.com/contact-us
There isn't any JQuery or other scripts on the contact page. Yet in IE8 and IE9 the validation is not working and I am not getting any JS errors being displayed.
The validation is working in FF & Chrome.

Not sure where to look to find why it doesn't work in IE8 and IE9.

We have multiple people here that are having the issue with the validation not working properly on https://creditsolutions.ca/contact-us/worksheet in IE8. The client uses IE8 and they found the issue to begin with, so we need to figure out how to solve the problem.

Thank you for your help.
GreyHead 11 Jun, 2012
Hi rlab,

The validation appears to work correctly on the KevinCorcoran.com site with IE9 in both IE8 and IE9 browser mode. The attached image in in IE8 mode.

FYI, JQuery is being loaded on this page I can see v1.7.2 and there is a fatal error in the template component page if I try to load the form without the component.

I've tried again with the CreditSolutions site and still can't replicate the error using IE9 in any browser mode. That makes it really tough to try to diagnose.

Bob
rlab 11 Jun, 2012
Hi,

Ok, I have component.php working without errors. I have turned off the JQuery plugin for the front of the site. On this page: http://www.new.kevinjcorcoran.com/index.php?option=com_content&view=article&id=8&tmpl=component when in IE9 or IE8 mode in IE9, I do not get any validation when I tab through the fields.

In IE7 mode I get validation messages and the JS error. To get the JS error follow these steps please:

1. focus on a required field (eg First Name)
2. remove focus. Validation warning appears using Ajax animation as intended.
3. do the same for a second field (eg Last Name). Now there are 2 fields with validation warnings.
4. populate one of the 2 fields, then remove focus.
5. Validation warning disappears using Ajax animation as intended.
6. populate the second field.
7. Validation warning persists; does not disappear.
8. Validation script in general no longer functions properly.

The above point # 5 applies consistently no matter which field is populated first.
Once the warning disappears successfully using ajax as in point 4, it no longer works for the second field.

So that implies that something in the "remove warning label" process is breaking the script.

Thank you.
GreyHead 12 Jun, 2012
Hi rlab,

. . . I do not get any validation when I tab through the fields.

It looks as if your template is not loading all of the ChronoForms files. If you look at the form without the template the validation is OK.

I can now see and replicate the IE problem. It looks like a FormCheck bug - perhaps the Error message div isn't being created as an element with the necessary properties. I don't see any reports in the FormCheck Group though (or any recent posts).

The simplest workaround may be to switch back to the bubble messages.

Bob
rlab 13 Jun, 2012
Hi Bob,

Thank you for your help. I have been able to get validation working in both site now using the bubble messages.
rlab 13 Jun, 2012
Hi,

I think I have found the cause of the problem. When you add the:
{chronoforms}form{/chronoforms}
code in the editor, it puts a <p></p> around the code and this seems to be what is causing the issue. If you change the surronding to <div></div> then the validation works and you don't have to use the bubble validation.
GreyHead 14 Jun, 2012
Hi rlab,

Sorry I didn't spot that, it's one of the problems I usually check for. It's a *feature* of the JavaScript editor that is adds <p> tags round anything it doesn’t recognize; and IE enforces the strict HTML rule that <form> tags aren't allowed inside <p> tags. if you add <div> tags you will prevent this bug.
<div>{chronoforms}form{/chronoforms}</div>

Bob
This topic is locked and no more replies can be posted.