jquery 验证 IE 对象不支持属性

Question

我正在使用jQuery validation plugin。如果我尝试设置自定义字段以突出显示它仅在 IE 中显示错误（在 IE11 和 IE10 上测试）。控制台错误是 Object doesn't support property or method '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>

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

Answer 2

我知道这是旧的 post，但我认为值得更新。

传入的对象是一个dom元素，并且永远是一个dom元素。与相反

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

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

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

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

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

jquery 验证 IE 对象不支持属性

jquery validation IE Object doesn't support property

jquery

internet-explorer

jquery-validate

jquery 验证 IE 对象不支持 属性

jquery validation IE Object doesn't support property

jquery

internet-explorer

jquery-validate

jquery 验证 IE 对象不支持属性