0

Am getting this error in IE8 F12 tools

I am trying to write unobstrusive validation code, wherein I will call validate() method on body onload and it will attach validation code on particular events of the elements depending on its class name. (eg. for text box with class "required" it will attach required() on its onblur)

enter image description here

What is the reason for this error?

Edit

The problem is not in getElementsByClassName() method since it is returning the array of elements with class required as you can see in IE8 watches

enter image description here

Mahesha999
  • 22,693
  • 29
  • 116
  • 189

2 Answers2

0

Try this solution - I tested it and it worked for your snippet (you have to take the code he wrote in the "Update:" paragraph):

javascript document.getElementsByClassName compatibility with IE

Looks like getElementsByClassName is not supported in IE8.

By the way: This is a perfect example why you should use jQuery - since you won't have issues like this there :)

edit: I tested it like this:

<!DOCTYPE html>
<html>
    <head>
        <script type="text/javascript">

            function getElementsByClassName(node, classname) {
                var a = [];
                var re = new RegExp('(^| )'+classname+'( |$)');
                var els = node.getElementsByTagName("*");
                for(var i=0,j=els.length; i<j; i++)
                    if(re.test(els[i].className))a.push(els[i]);
                return a;
            }

            window.onload = function() {
                var a = getElementsByClassName(document.body,"required");

                for(var i = 0;i < a.length;i++)
                    a[i].onblur = function() { alert("blured")};
            };
        </script>
    </head>
    <body>
       <input class="required" type="text" name="uno" />
       <input class="required" type="text" name="duno" />
    </body>
</html>
Community
  • 1
  • 1
OschtärEi
  • 2,255
  • 3
  • 20
  • 41
  • oops that method is there down the lines and the array a is getting correctly populated, now I realized the problem that a[i] is of type DispHTMLInputElement and it doesnt have onblur and onclick event as I can see it in IE's type column, anyway can I cast it to input element? – Mahesha999 Feb 07 '13 at 13:35
  • hey see the printscreen of the IE8 watch window – Mahesha999 Feb 07 '13 at 13:43
  • really I dont want to use jQuery, u tested it in IE8? – Mahesha999 Feb 07 '13 at 13:45
  • Marsha: yes tested it in IE 8... if it's not working - why not taking Christoph's solution? @Christoph strange... for me its not working: http://i50.tinypic.com/1f9qo9.png – OschtärEi Feb 07 '13 at 13:53
  • 1
    Of course it is not ... in `quirksmode` ... mind adding a doctype? :-D – Christoph Feb 07 '13 at 14:04
  • Ok. Now I feel really ashamed. Especially because I did not simply forget it, but really thought it does no matter in this case. Post edited & thanks. – OschtärEi Feb 07 '13 at 14:06
  • getElementsByTagName is not supported by IE8 – Mahesha999 Feb 07 '13 at 18:59
0

getElementsByClassName is not supported in IE8.

You can try document.querySelectorAll or document.querySelector. It is more flexible and very comfortable to use.

In your case it would be:

var a = document.querySelectorAll(".required");

You can use basic css-selectors to get your DOM-Elements such as querySelector("#ID .class") as you would in jQuery.

Christoph
  • 50,121
  • 21
  • 99
  • 128
  • 1
    well, try `querySelectorAll` and see if this fixes your problem... Do you have any custom plugins or frameworks running? – Christoph Feb 07 '13 at 13:51
  • yeah that works in IE8, but aware of any way to make it work in IE5 (or even IE7) - just in case – Mahesha999 Feb 07 '13 at 19:00