IE8 Javascript validation error

we are getting an error with any fields that have a validation in IE8 (works every other browser). using the mootools validation.

ex: i click a text field, then click off it, i get the following:


function(){Garbage.trash(this.getElementsByTagName('*'));return this.setHTML('');}

instead of

this field is required

Hi yourmanstan,

try to clear your browser and website cache ? your fields have any titles ? how did you create the form ? wizard or your HTML ?

Cheers
Max

I am having error in IE 8 also for validation working fine in ie 7 and other browsers

but it returns this

function(text){var tag=this.getTag();if(['style','script'].contains(tag)){if(window.ie){if(tag=='style')this.styleSheet.cssText=text;else if(tag=='script')this.setProperty('text',text);return this}else{this.removeChild(this.firstChild);return this.appendText(text)}}this[$defined(this.innerText)?'innerText':'textContent']=text;return this}

Hi rdakers28,

do you have a link to the page ?

Max

Yes it is http://www.majesticcrete.com/info/contact-us/contact-us.html

Has this been resolved?

Hi peteresen,

Not as far as I know - it appears to be somewhere in the combination of MooTools and LiveValidation and only affect IE8.

Are you seeing the same thing?

Bob

Yes.

I did wonder if it was some missing ; in includes/jsvalidation but it didn't seem to fix it. Definitely an IE8 issue. Any ideas?

I am seeing a similar symptom on my side, but my error is different.. I get two different ones.

EDIT: Forgot to mention I am running 3.1 RC5.1.

In IE8, sometimes the page doesn't load completely past the {recaptcha} tag.. w3c validator says:

Line 139, Column 30: document type does not allow element "div" here; missing one of "object", "applet", "map", "iframe", "button", "ins", "del" start-tag

    <span><div id='recaptcha'><script type="text/javascript" src="http://api.rec

Error is:

Message: HTML Parsing Error: Unable to modify the parent container element before the child element is closed (KB927917)
Line: 0
Char: 0
Code: 0

Sometimes, when the order is correct I think.. The page will load completely.. (randomly), I will get to these two errors:

Message: 'getProperty(...)' is null or not an object
Line: 52
Char: 3
Code: 0
URI: http://flamenco.hk/components/com_chronocontact/js/jsvalidation2.js


Message: Object doesn't support this property or method
Line: 59
Char: 102
Code: 0
URI: http://flamenco.hk/media/system/js/mootools.js

I hope we can fix these IE issues.. It works fine in Opera/Safari/Chrome/Firefox.. just not IE.

Page is here: http://flamenco.hk/index.php?option=com_chronocontact&Itemid=54

I see the recaptcha calling it's API halfway down the page via js, so I think that is the problem.

Hi elsdon,

Please can you paste your form HTML as it might help us debug (or email me a form backup).

I've seen the getProperty error with a Reset button that doesn't have a name - if you have one in your form please try adding name='reset' to thr input.

And are you using the recaptcha plugin or the ChronoForms built-in Captcha?

Bob

Hi there,

As per the page link, I am using the Recaptcha plugin, via the {Recaptcha} tag after enabling it on the form.. Not the built in ChronoForms plugin.

The form HTML is simple as follows:

<h2 class="contentheading">  Contact Us </h2>
<div class="form_item">
  <div class="form_element cf_textbox">
    <label class="cf_label" style="width: 120px;">Name:</label>
    <input class="cf_inputbox required validate-alpha" maxlength="150" size="50" title="Please enter your name!" id="text_1" name="name" type="text" />
  
  </div>
  <div class="clear"> </div>
</div>

<div class="form_item">
  <div class="form_element cf_textbox">
    <label class="cf_label" style="width: 120px;">E-mail:</label>
    <input class="cf_inputbox validate-email" maxlength="150" size="30" title="Please enter your e-mail!" id="text_2" name="email" type="text" />
  
  </div>
  <div class="clear"> </div>
</div>

<div class="form_item">
  <div class="form_element cf_textbox">
    <label class="cf_label" style="width: 120px;">Contact Number:</label>
    <input class="cf_inputbox" maxlength="150" size="30" title="" id="text_3" name="phone" type="text" />
  
  </div>
  <div class="clear"> </div>
</div>

<div class="form_item">
  <div class="form_element cf_textarea">
    <label class="cf_label" style="width: 120px;">Your Message:</label>
    <textarea class="cf_inputbox required" rows="10" id="text_4" title="Please enter a message!" cols="50" name="message"></textarea>
    
  </div>
  <div class="clear"> </div>
</div>

<div class="form_item">
  <div class="form_element cf_captcha">
    <label class="cf_label" style="width: 120px;">Enter words:</label>
<div class="clear"> </div>
    <span>{ReCaptcha}</span> 
    
    </div>
  <div class="clear"> </div>
</div>

<div class="form_item">
  <div class="form_element cf_button">
    <input value="Submit" type="submit" /><input type="reset" value="Reset"/>
  </div>
  <div class="clear"> </div>
</div>

Thank you for the quick response. If you need any additional information, please let me know.

In the form generated output, there is this line above the Recaptcha:

<span><div id='recaptcha'><script type="text/javascript" src="http://api.recaptcha.net/challenge?k=6Lc7BAYAAAAAAHQ-lUPKA9ELfkh45tLkJockxyJX"></script>

        <noscript>
            <iframe src="http://api.recaptcha.net/noscript?k=6Lc7BAYAAAAAAHQ-lUPKA9ELfkh45tLkJockxyJX" height="300" width="500" frameborder="0"></iframe><br/>
            <textarea name="recaptcha_challenge_field" rows="3" cols="40"></textarea>
            <input type="hidden" name="recaptcha_response_field" value="manual_challenge"/>
        </noscript></div></span> 

I will try adding a value to the 'reset' now.

EDIT: adding a 'name' tag to the reset and submit input controls has resolved the getProperty Error.. but the mid-page javascript call is the one that is rendering the form unusable from IE.

Hi elsdon,

I can see the error on your site, but can't emulate it locally. I guess that may be something to do with the internet timing :-(

I tried a quick fix moving the ReCaptcha link into the header but that doesn't work. The link actually creates a second script link and seems to need to be loaded in the page body.

There may be a fix on the ReCaptcha site, if you find anything let me know. Meanwhile I've added this as a bug to be looked at as soon as I can.

Bob

Hey there,

I'll continue looking into this but for now I've just switched back to the built-in cf_captcha and will use that for now.

All other IE8 errors should be resolved.

Thanks for the help, I'll let you know if I arrive to any new conclusions.

Hi,

I have just tested this form in IE 8 and it validates fine!

Regards,
Max

Are you talking about my form or elsdon validates fine? B/c I was gonna say I am still receiving errors

Hi rdakers28,

Yes, elsdon has switched his form back to use the ChronoForms built-in Captcha and that is working OK. It's a different issue from the validation one that you and petersen are seeing.

Bob

Hi rdakers28,

I was talking about elsdon form, I try to open your form now and I get a 404 - Article #43 not found error page!

Max

Hi Max,

Here's a screenshot of rdakers28's form from a couple of days ago (in IE6 or 7) you see the correct 'This field is required' message.

Bob

Hi all,

After a lot of experiments I've found the cause of this and two fixes!

The cause is that the inputs that show the error don't have a title attribute, adding title='' will remove the error. (There's presumably some deeper root cause but I didn't get there.

So Fix 1 is to add the title attribute.

Fix 2 is a workaround - the error only occurs in IE8 mode so if you switch the page to IE7 Compatibility all is well. To do this add:

<?php
$doc =& JFactory::getDocument();
$doc->setMetaData('X-UA-Compatible', 'IE=EmulateIE7', true);
?>

at the beginning of the Form HTML and the problem goes away.

This generates a metatag in the page header that will switch IE8 into IE7 compatibility mode and all is then well.

Bob

Fix 1 get rid of error but instead of saying this is required it now just displays the title attribute i put there, I guess i can write in the title attribute this is required

Fix 2 works but I will wait to see if we can get a fix that corrects it the right way.

Hi,

Thanks Bob for finding why this happens, after some test now I found that IE8 doesn't deal good with the mootools getProperty function, if the property doesn't exist it returns an error, I think this is because IE8 now tries to work like other browsers ? I think the best fix for now is to use one of the 2 solutions posted by Bob!

Regards,
Max

Hi Bob & Max,

The first solution works fine for me.
The second solution doesn't work , when I put the code of above into the beginning of the htm => I get a blank page without any field or text that is on the form.

Maybe I'm wrong but the code below is just a short cut of the html of the registration form. This is the html where I put the code of your solution in it.

<DIV class=form_item   >
<DIV class="form_element cf_heading" >
<H1 class=cf_text id="" >
<font face="Arial Black" color="#EB7800" style="font-size: 22pt">Registratie formulier</font></H1>
<p class=cf_text > </DIV>
<DIV class=clear ><font face="Arial" size="2"><b>Velden met * zijn verplicht in 
	te vullen velden. </b></font>
	<p><font face="Arial" size="2"><b>Het registreren van een account op "De Restaurantgids" is 
	gratis. </b></font></p>

Thanks for helping. Kris


Thanks

Hi vdlkris

It should be OK if you are using Joomla 1.5.x the form HTML box would look like

<?php
$doc =& JFactory::getDocument();
$doc->setMetaData('X-UA-Compatible', 'IE=EmulateIE7', true);
?>
<DIV class=form_item   >
<DIV class="form_element cf_heading" >
<H1 class=cf_text id="" >
<font face="Arial Black" color="#EB7800" style="font-size: 22pt">Registratie formulier</font></H1>
<p class=cf_text > </DIV>
<DIV class=clear ><font face="Arial" size="2"><b>Velden met * zijn verplicht in
   te vullen velden. </b></font>
   <p><font face="Arial" size="2"><b>Het registreren van een account op "De Restaurantgids" is
   gratis. </b></font>
. . .<

Bob

Dear everybody,

I encountered the same problem and I might have a solution! After a day of searching for the problem, I stumbled upon QuirksMode (again) and there I found some valuable info on attributes and the way to approach them. See http://www.quirksmode.org/dom/w3c_core.html#attributes for more info.

On Internet Explorer the Element.getProperty method in Mootools 1.11 gets an element's attribute's value directly using:

elm.attributes['title'].nodeValue;

This is highly discouraged by QuirksMode, but seems to work fine for <MSIE8.

So my solution is to check if the useragent is >MSIE7 and then use the next code to retrieve the attributes value:

elm.getAttribute('title');

I slightly modified the Element.getProperty method and attached it to the Element-object using the extend method. Place the following code somewhere on your page after loading MooTools and before using the getProperty method. Works fine for me!

Element.extend({
	getProperty: function(property){
		var index = Element.Properties[property];
		if (index) return this[index];
		var flag = Element.PropertiesIFlag[property] || 0;

		// Commented old line
//		if (!window.ie || flag) return this.getAttribute(property, flag);

		// Two new lines: put MSIE version number in var msie and check if this is 8 or higher
		var msie = navigator.userAgent.toLowerCase().match(/msie\s+(\d)/);
		if (!window.ie || flag || msie && msie[1]>=8) return this.getAttribute(property, flag);

		var node = this.attributes[property];
		return (node) ? node.nodeValue : null;
	}
});

Best of luck,
Laurens Meurs (Rotterdam, the Netherlands)

Hi Laurens,

That's it, thank you very much for sharing it, I managed to know its the getProperty method which is causing the trouble in IE8 but didn't have time to build a function to solve it, you did it!🙂

I will load the extended function using Chronoforms starting from the coming release!

Best regards,
Max

Hi all!

I'm thrilled to see the solution to this IE8 headache. However, can anyone enlighten me on where to exactly place the additional code...

Thank You!

Hi apabiona,

if you are using it for Chronoforms then you can wait a day or 2 and you will get it in the new release, if not then you need to place it under the mootools loading line wherever its called!

Max

Thank You Max and kudos to Chronoforms!

Yes, I'm using it for Chronoforms, I will wait then for the next release 🙂

Hi Guys,

So I installed the latest release and noticed that the IE8 js bug is still there. Am I missing something? Thanks!

Hi apabiona,

please make your browser and website caches are clear then retest, everything looks fine here or show me your form to test myself on IE8

Regards,
Max

Hi Max,

thanks for the response. I'm currently working on my local so I can't show you the form.
anyway, I noticed that if i turn off the validation using mootools library, the .js error goes away
attached is a screenshot of the js error (if it helps in anyway)

so as an alternative in the javascript live validation im thinking of using the cf classes like "cf_inputbox validate-selection", "cf_inputbox required" and the likes to validate. tedious but working!

nevertheless, kudos to the new release!

Ok, I have just found another glitch here, I will release RC5.21 later today with some glitches fixes do please make sure you get it and let me know if it works the easy way!

Thanks and regards,
Max

Hi Max,

Would just like to update you. Earlier today I upgraded to RC5.3, works fine until I saw the forms inside articles, there was this ugly js error which halts the entire form from loading.

i did forget to update the plugin! after doing the plugin update validation works smoothly and so far no more js error in IE8.

thanks a lot! thumbs up to CF and the hardworking mods!