Проверка jquery IE Объект не поддерживает свойство

Question

Я использую jQuery validation plugin. Если я пытаюсь установить настраиваемое поле, чтобы выделить его, отображается ошибка только в IE (тестируется в IE11 и IE10). Ошибка консоли составляет Object doesn't support property or method 'closest' и указывает на строку в разделе «выделить».

Код:

$(document).ready(function(){ 
    $("#formPost_connection").validate({ 
     rules: { 
      mail: { 
       required: true 
      } 
     }, 
     messages: { 
      mail: { 
       required: "Please enter your email address or username" 
      } 
     }, 
     errorElement : 'div', 
     errorPlacement: function(error, element) { 
      var parent = element.closest('.form-group'); 
      error.insertAfter(parent); 
     }, 
     highlight: function(element, errorClass) { 
      var parent = element.closest('.form-group'); 
      $(parent).addClass('field-error'); 
     }, 
     unhighlight: function(element, errorClass) { 
      var parent = element.closest('.form-group'); 
      $(parent).removeClass('field-error'); 
     } 
    }); 
}); 

HTML формы является:

<form id="formPost_connection" autocomplete="on" method="POST" name="" action=""> 
        <fieldset> 
         <div class="form-group"> 
          <label for="account_login">Email address/User name:</label> 
          <div class="input-wrapper"> 
           <input id="account_login" type="text" name="mail" title="Enter your email address or user name" required /> 
          </div> 
         </div> 
         <div class="password-field-wrapper"> 
          <div class="form-group" style="margin-bottom: 0;"> 
           <label for="mdp">Password:</label> 
           <div class="input-wrapper"> 
            <input id="mdp" type="password" name="mdp" title="Enter your password" required /> 
           </div> 
          </div> 
          <a title="Did you forget your password?" class="forgot-password" href="/reset-password">Forgot your password?</a> 
         </div>  

         <button class="btn" type="submit">Log In</button> 
        </fieldset> 
       </form> 

Answer 1

Похоже, что проблема с тем, как передается значение элемента в IE, в IE это ссылка дом элемент а не объект jQuery.

Просто оберните элемент с JQuery как

$(document).ready(function() { 
    $("#formPost_connection").validate({ 
     rules: { 
      mail: { 
       required: true 
      } 
     }, 
     messages: { 
      mail: { 
       required: "Please enter your email address or username" 
      } 
     }, 
     errorElement: 'div', 
     errorPlacement: function (error, element) { 
      var parent = $(element).closest('.form-group'); 
      error.insertAfter(parent); 
     }, 
     highlight: function (element, errorClass) { 
      var parent = $(element).closest('.form-group'); 
      $(parent).addClass('field-error'); 
     }, 
     unhighlight: function (element, errorClass) { 
      var parent = $(element).closest('.form-group'); 
      $(parent).removeClass('field-error'); 
     } 
    }); 
}); 

Demo: Fiddle

Answer 2

Я знаю, что это старый пост, но я подумал, что это стоит обновление.

Объект, прошедший через элемент dom, и всегда будет элементом dom. В противоположность Arun P Johny's answer

Проблема заключается в том, что все браузеры, кроме того, реализовали свои собственные экспериментальные ближайшие функциональные возможности, позволяя использовать самую близкую функцию непосредственно на элементах dom; Это означает, что jQuery не требуется для того, чтобы эти браузеры выполняли самые близкие функциональные возможности, поэтому он кажется ошибкой только IE. На самом деле это не ошибка, написанная в коде.

Это было выполнено на хроме 03/03/2015, всего за 2 месяца до этого вопроса.

Правильный подход в настоящее время, как пояснил ответ Arun P Johny является:

$(element).closest('.form-group') 

Для получения дополнительной информации по экспериментальной ближайшей функциональности, пожалуйста, обратитесь к https://developer.mozilla.org/en-US/docs/Web/API/Element/closest