jQuery验证IE对象不支持属性

Question

我正在使用jQuery验证插件。如果我尝试设置自定义字段以进行高亮显示，则仅在IE中显示错误（在IE11和IE10上测试）。控制台错误为对象不支持属性或方法“closest”，并指向“highlight”部分的行。

代码如下：

$(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>

- user4675957

---

jquery-1.11.2.min.js - user4675957

Answer 1

似乎在IE中传递元素值的方式有问题，在IE中它是一个dom元素引用，而不是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');
        }
    });
});

演示：Fiddle

- Arun P Johny

---

可以不用 jQuery 吗？ - Joe Lloyd

Answer 2

我知道这是一篇旧文章，但我认为更新它是值得的。

传递的对象是一个dom元素，并且始终是一个dom元素。与Arun P Johny's answer相反

问题在于除了ie之外的所有浏览器都实现了自己的实验性closest功能，允许直接在dom元素上使用closest函数；这意味着对于那些浏览器，不需要jquery来执行最接近功能，这就是为什么它似乎只是IE的一个bug。实际上，这不是一个bug，而是编写的代码有问题。

这个功能是在2015年3月3日在chrome上实现的，距离这个问题只有2个月。

如Arun P Johny的答案所解释的那样，目前的正确方法是：

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

如需了解实验性的 closest 功能的更多信息，请参阅 https://developer.mozilla.org/zh-CN/docs/Web/API/Element/closest

- McShep