jQuery validation error on IE8

Question

I'm getting an 'object doesn't support this method or property' error on IE8. The line of code it is referring to is below:

 $('#example-advanced-form').ajaxForm({
      target: '.success',
      success: function() {
          $('.success').fadeIn('fast');
          $("#contact_form").toggle("fast");
      }
});

The reason I am using this is because FormData does not work below IE10.

Here is a screenshot of the error:

Here is the full script...

        <script type="text/javascript">    

        var form = $("#example-advanced-form").show();


          $('#role').validate({ // initialize the plugin
              rules: {
                  role: {
                      required: true,
                  }
              }
          });

        form.steps({
            headerTag: "h3",
            bodyTag: "fieldset",
            transitionEffect: "slideLeft",

            onStepChanging: function (event, currentIndex, newIndex)
            {
                // Allways allow previous action even if the current form is not valid!
                if (currentIndex > newIndex)
                {
                    return true;
                }


                // Needed in some cases if the user went back (clean up)
                if (currentIndex < newIndex)
                {
                    // To remove error styles
                    form.find(".body:eq(" + newIndex + ") label.error").remove();
                    form.find(".body:eq(" + newIndex + ") .error").removeClass("error");
                }
                form.validate().settings.ignore = ":disabled,:hidden";
                return form.valid();
            },

            onStepChanged: function (event, currentIndex, priorIndex)
            {
                // 
                if (currentIndex === 2 && $("input:radio[name='workfor']").is(":checked"))
                {
                    form.steps("next");
                }

            },

            onFinishing: function (event, currentIndex)
            {
                form.validate().settings.ignore = ":disabled";
                return form.valid();
            },

            onFinished: function (event, currentIndex)
            {



              if(navigator.appVersion.indexOf("MSIE 8.")!=-1 || navigator.appVersion.indexOf("MSIE 9.")!=-1) {

                  //alert("old IE!");

                  // bind 'myForm' and provide a simple callback function 



                $('#example-advanced-form').ajaxForm({
                  target: '.success',
                  success: function() {
                  $('.success').fadeIn('fast');
                  $("#contact_form").toggle("fast");
                  }
                });


              } else {
                 //alert("Not old IE!");



              //data to be sent to server         
              var m_data = new FormData();    
              m_data.append( 'name', $('input[name=name]').val());
              m_data.append( 'number', $('input[name=number]').val());
              m_data.append( 'email', $('input[name=email]').val());
              m_data.append( 'workfor', $('input[name=workfor]:checked').val());
              m_data.append( 'role', $('select[name=role]').val());
              m_data.append( 'cv', $('input[name=cv]')[0].files[0]);
              m_data.append( 'coverletter', $('textarea#coverletter').val());



              //instead of $.post() we are using $.ajax()
              //that's because $.ajax() has more options and flexibly.
              $.ajax({
                url: 'contact_me.php',
                data: m_data,
                processData: false,
                contentType: false,
                type: 'POST',
                dataType:'json',
                success: function(response){
                   //load json data from server and output message     
                  if(response.type == 'error'){ //load json data from server and output message     
                      output = '<div class="error">'+response.text+'</div>';
                  }else{
                      output = '<div class="success">'+response.text+'</div>';
                      $("#contact_form").toggle("fast");
                  }
                  $(".form_message").hide().html(output).slideDown();
                }
              });  

            }//END browser check coniditonal statement


            }

        }).validate();


        </script>

Answer 1

$.ajaxForm is not a standard method for JQuery; most likely, the script referencing this add on is failing, or in the wrong order. If failing, it could be the name or location to the script file is wrong, or an error is occurring on the page, or in that plugin, that's causing it. Using a debugging tool will help identify the issue (IE's developer toolkit, firefox with firebug, chrome with it's dev tools or firebug).