jQuery 验证 IE 对象不支持属性答案

【问题标题】：jquery validation IE Object doesn't support propertyjQuery 验证 IE 对象不支持属性
【发布时间】：2015-05-18 08:06:14
【问题描述】：

我正在使用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>

【问题讨论】：

jquery-1.11.2.min.js

标签： jquery internet-explorer jquery-validate

【解决方案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

【讨论】：

可以不用jQuery吗？

【解决方案2】：

我知道这是一篇旧帖子，但我认为值得更新。

传入的对象是一个dom元素，并且永远是一个dom元素。与Arun P Johny's answer相反

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

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

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

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

有关实验性最接近功能的更多信息，请参阅https://developer.mozilla.org/en-US/docs/Web/API/Element/closest

【讨论】：