jquery validation plugin, IE7: settings is null or not an object

jquery validation plugin, IE7: settings is null or not an object

Dear all,

I have a problem that I can't seem to find a solution for. 

I have a set of radio buttons that I validate with the jquery validation plugin to make sure that they are selected.I want the user to choose Resit (Yes/No), Standard glh (Yes/No) and then pressing "Finish". An error should be reported if any of them are empty. I dynamically wrap a form tag around the table where the radio buttons are located and then validate that form. This works fine in Firefox and Chrome but not in IE7. I debug the code while using IE 7 and Visual studio says:

 "Microsoft JScript error: 'settings' is null or not an object". It occurs on line 302 in jquery validation plugin 1.6:

  1. function delegate(event) {
    var validator = $.data(this[0].form, "validator");
    validator.settings["on" + event.type] && validator.settings["on" +       event.type].call(validator, this[0] );
    }

I have tried this with validation plugin 1.6 and 1.7 and jquery 1.3.2 and 1.4.2.  The combination 1.6, 1.3.2 and 1.7 , 1.4.2 both report the problem.

I read that there were compatibility issues with the validation plugin and jquery 1.4 (see link below) so that's why I tried with 1.6 and jquery 1.3.2. ( http://forum.jquery.com/topic/validate-compatability-with-jquery-1-4)

I don't know what's causing it and I would appreciate and help in solving this. I include sample code below.

Thank you,

/S
  3. <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  4. <html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml" lang="en">
  5. <head>    
  6. <script type="text/javascript" src="jquery.js"></script>
  7. <script type="text/javascript" src="jquery.validate.js"></script>
  8. <script type="text/javascript">
  9. $(document).ready(function () {


  12.    $('#finish').click(function(){
  13.        alert("hej");
  14.     $("<div id='jserrorsummary'></div>").appendTo("#finish-element"); // I use this div to display the errors

  16.     // Get the table and insert the table into a temporary form tag
  17.     // Evaluate the temporary form and bring all the error msg into
  18.     // an alert box. jquery validation plugin works with a form tag only

  20.     // Wrap the fields in a form tag. Validate the form and remove the form tag afterwards
  21.     if ( $("#aoss").length > 0)  {
  22.         $("#aoss").wrap("<form id='tmpform'> </form>");
  23.     }
  24.     else{
  25.         // table is empty. just continue to the login page
  26.         alert("login");
  27.     }

  29.     var validator = $("#tmpform").validate({
  30.            submitHandler: function(data) {
  31.    },

  33.         // I use this to move the error messages to the top of the form
  34.         // to make it easier to read
  35.         showErrors: function(errorMap, errorList) {

  37.             var fieldnames = {};
  38.             fieldnames.hrs_per_week = "h &nbsp; w";
  39.             fieldnames.no_of_weeks = "w &nbsp; y";

  41.             var msg = "<div class='errorheading'>Your form contains "
  42.                                    + this.numberOfInvalids();

  44.                switch(this.numberOfInvalids() ){
  45.                    case '0':
  46.                      msg += " error";
  47.                    break;

  49.                     case "1":
  50.                         msg += " error, see details below.";
  51.                         break;
  52.                    default:
  53.                        msg += " errors, see details below.";
  54.                        break;
  55.                }              
  56.                  var errorText = "";
  57.                  var n = 0;

  59.                  // Create un <ul> with the errors in it.
  60.                  errorText = errorText + "<ul>";
  61.                  while (n < errorList.length)
  62.                  {
  63.                      var errorObj = errorList[n++];

  65.                     // Wrap this in an <li>
  66.                      errorText +=  "<li>";
  67.                      errorText += "<span class='errorlabel'>" + errorObj.element.name + "</span>:" + "<span class='errormessage'>"+errorObj.message+"</span>";                    
  68.                      errorText +=  "</li>";
  69.                  }
  70.                  errorText +=  "</ul>";
  71.                                   
  72.                 msg += errorText;
  73.                 msg += "</div>";
  74.        $("#jserrorsummary").html(msg);
  75. }
  76.     });

  78.     // Execute the validation
  79.     var isValid = $("#tmpform").valid();

  81.     if (isValid == true){
  82.          var arr = {};
  83.         // add the values of radio buttons and check boxes
  84.         $("input:checked").each(function(){
  85.    // Store values with ajax
  86.         });

  88.         // Textboxes
  89.         // Get all textboxes that are inside #tmpform and are not disabled
  90.         $("#tmpform input:text:not([disabled])").each(function(){
  91.      // Store values with ajax
  92.         });
  93.     }

  95.     // Remove the temporary form tag from the dom
  96.      $("#aoss").unwrap();

  98.   // Run through the errors and add a red border around the element (adding the
  99.   // class "error"). If not remove the class
  100.     var errorList = validator.errorList;
  101.     $("input").each(function(){
  102.         var elementName = $(this).attr("name");
  103.         var isError = false;
  104.         var n = 0;

  106.         // Compare the element name against the error
  107.         while (n < errorList.length)
  108.         {
  109.             var errorObj = errorList[n++];
  110.             var errorElementName = errorObj.element.name;
  111.             if (elementName == errorElementName)
  112.                 {
  113.                    isError = true;
  114.                    break;
  115.                 }
  116.         }
  117.         // Create a red border around the elment if it is an error. I use a
  118.         // pre-created <span> for that
  119.         if (isError == true){
  120.             $("[name='"+elementName+"-borderarounderror']").each(function(){
  121.                 $(this).addClass("borderarounderror");
  122.             });
  123.         }
  124.         else{
  125.             // Remove the red border
  126.             $("[name='"+elementName+"-borderarounderror']").each(function(){
  127.                 $(this).removeClass("borderarounderror");
  128.             });
  129.         }

  131.     });
  132.    }); // click()
  133. });
  134. </script>
  135. </head>
  136. <body>
  137. <div id="content">
  138. <button name="finish" id="finish" type="button">Finish</button> </div>
  139.     <div id="unitsAttached"><table id="aoss"><tbody><tr><th>Product code</th><th>List code</th><th>Version code</th><th>List code</th><th>Description</th><th>Resit</th><th>standard GLH</th></tr><tr><td>SHB2312CNP</td><td>A11</td><td>SHB2312CNU</td><td>A11</td><td id="description_SHB2312CNUA11">Donald Duck 3in</td><td><span id="resit-SHB2312CNU-borderarounderror" name="resit[SHB2312CNU]-borderarounderror"> <input id="resit-SHB2312CNU-1" name="resit[SHB2312CNU]" value="1" class="required" type="radio">Yes
  140.                                 <input id="resit-SHB2312CNU-0" name="resit[SHB2312CNU]" value="0" class="required" type="radio">No </span></td><td><span id="glh-SHB2312CNU-borderarounderror" name="glh[SHB2312CNU]-borderarounderror"><input id="glh-SHB2312CNU-1" name="glh[SHB2312CNU]" value="1" class="required" type="radio"> Yes  
  141.   <input id="glh-SHB2312CNU-0" name="glh[SHB2312CNU]" value="0" type="radio">No</span>       
  142.   </td></tr></tbody></table></div>
  143.     
  144. </body></html>