Validation: Does not work in IE8

Validation: Does not work in IE8

    Hi everyone

    My form, pasted below in it's entirety, does not verify in IE8. No errors -- validation is just ignored. I am using jquery 1.8.1 and the validation plugin version 1.9. Is it a syntax issue?
    1. <!DOCTYPE HTML>
    3. <html>
    4. <head>
    5. <!-- HTML5 biolerplace stuff below -->
    6. <meta http-equiv="X-UA-Compatible" content="IE=edge">
    7. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    8. <meta name="description" content="">
    9. <meta name="viewport" content="">
    10. <link rel="stylesheet" href="css/normalize.css">
    11. <link rel="stylesheet" href="css/main.css">
    12. <script src="js/vendor/modernizr-2.6.1.min.js"></script> 
    13. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
    14. <script src="js/vendor/jquery.defaultvalue.js"></script>
    15. <script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.js"></script>

    17. <style>
    18. #formwrapper {
    19. height:275px; 
    20. width:250px; 
    21. background-color: #f8f8f8; 
    22. border: 1px solid #cccccc; 
    23. padding: 25px 0 25px 25px;
    24. font-family: arial;
    25. font-size: 12px;
    26. }
    28. .entry {
    29. border: 1px solid #cccccc; 
    30. margin: 5px 0; 
    31. width: 212px; 
    32. /* height: 26px; */
    33. color: black;
    34. padding: 7px 0 7px 10px;
    35. }
    37. #form_title, #button {
    38. font-size: 18px;
    39. }
    41. #form_title {
    42. color: #00589f;
    43. margin-bottom: 20px;
    44. }
    46. #button {
    47. width: 80px;
    48. height: 24px;
    49. position: relative;
    50. left: 143px;
    51. top: 15px;
    52. background-color: #00589f;
    53. border: none;
    54. color: white !important;
    55. }
    57. .error {
    58. border: 1px solid red; 
    59. background:#FFFFFF;
    60. content: "text"
    61. }
    63. .empty {
    64. color: #ccc;
    65. }
    67. </style>

    69. <script type="text/javascript">
    70. //form validation start
    71.    $(document).ready(function() {
    72. //$('form').submit(function(){
    73. // $('.incomplete').val('');
    74.         //}); 
    75. //reject default values
    76.   $("#form").validate({
    77. wrapper: ".formwrapper",
    78. keyup: false,
    79. //onfocusout: false,
    80. //onclick: false,
    81. //onchange: false,
    82. errorLabelContainer: ".form",
    83. //errorClass: "incomplete",
    84. rules: {
    85. organization: {
    86. required: true,
    87. minlength: 2
    88. },
    89. firstname: {
    90. required: true,
    91. minlength: 2
    92. },
    93. lastname: {
    94. required: true,
    95. minlength: 2
    96. },
    97. email: {
    98. required: true,
    99. email: true
    100. },
    101. phone: {
    102. required: true,
    103. minlength: 10,
    104. digits: true
    105. }
    106. }
    107. });
    108. }); 

    110. </script>

    112. </head>
    113. <body>

    115. <div id="formwrapper">
    116. <div id="form_title">REQUEST INFO</div>
    117. <form id="form" name="form_container" action="#">
    118. <!-- fields -->
    119. <input class="entry" id="organization" type="text" name="organization" placeholder="Organization"/>
    120. <input class="entry" id="firstname" type="text" name="firstname" placeholder="First Name"/>
    121. <input class="entry" id="lastname" type="text"  name="lastname" placeholder="Last Name"/>
    122. <input class="entry" id="email" type="text" name="email" placeholder="Email"/>
    123. <input class="entry" id="phone" type="text" name="phone" placeholder="Phone"/>
    124. <!-- submit button -->
    125. <input id="button" class="button" type="submit" value="Submit" /> 
    126. </form>
    127. </div>
    128. <script>
    129. //talks to defaultvalue plugin to make placeholders work in IE
    130. $('#organization, #firstname, #lastname, #email, #phone').defaultValue();
    131. </script>
    132. </body>
    133. </html>